@use "../util" as *;
@use "../globals" as *;

.pagination {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  list-style: none;

  /*RECTANGULAR*/
  &.square .pagination-item .btn {
    border-radius: $base-border-radius;
  }
  /*TEXT*/
  &
    .pagination-item
    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
    background-color: transparent;
    color: inherit;
    &:hover {
      background-color: var(--bg-core-primary) !important;
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
    }
    &:active,
    &.active {
      background-color: var(--bg-core-primary-darken) !important;
    }
  }
  /*FILLED*/
  &.filled
    .pagination-item
    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
    background-color: var(--bg-core-primary-lighten);
    color: set-color var(--bg-core-primary-lighten);
    &:hover {
      background-color: var(--bg-core-primary) !important;
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
    }
    &:active,
    &.active {
      background-color: var(--bg-core-primary-darken) !important;
    }
  }
  /*OUTLINED*/
  &.outlined
    .pagination-item
    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
    background-color: transparent;
    color: var(--bg-core-primary-dark);
    border: 1px solid var(--bg-core-primary-dark);
    &:hover {
      color: var(--text-core) !important;
      border: 1px solid var(--bg-core-primary-dark) !important;
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
    }
    &:active,
    &.active {
      background-color: var(--bg-core-primary-darken) !important;
      color: set-color (var(--bg-core-primary-darken)) !important;
    }
  }

  .pagination-item {
    & > * {
      height: 2rem;
      min-width: 2rem;
      margin: 0 3px;
      padding: 0 6px;
      text-align: center;
      border-radius: 1rem;
      font-size: $font-size-sm;
    }

    :not(pagination-item-selected) > * {
      box-shadow: none;
    }

    .typography[disabled] {
      color: #ccc !important;
    }
  }

  &-small {
    .pagination-item {
      & > * {
        height: 26px;
        min-width: 26px;
        margin: 0 1px;
        padding: 0 4px;
        border-radius: 13px;
      }
    }
  }

  &-large {
    .pagination-item {
      & > * {
        height: 40px;
        min-width: 40px;
        padding: 0 10px;
        border-radius: 20px;
      }
    }
  }

  &-disable-elevation .pagination-item .btn {
    box-shadow: none;
  }

  &-rtl .pagination-item .icon-root {
    transform: scaleX(-1);
  }
}
