@use '../../../../shared/styles/variables' as *;

.employees-pagination {
  position: relative;
  z-index: 100;
  flex: 0 0 auto;
  padding: 12px 0 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  color: $color-text-muted;
  font-size: $font-size-16;
}

.employees-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;

  button {
    min-width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: $gray20;

    display: flex;
    align-items: center;
    justify-content: center;

    color: $gray50;
    font-size: $font-size-16;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;

    transition: 0.2s ease;

    &[aria-label='Предыдущая страница'],
    &[aria-label='Следующая страница'] {
      svg {
        width: 20px;
        height: 20px;
        fill: $transparent;
      }
    }

    &:hover {
      background-color: rgba($color-primary-rgb, 0.1);
    }

    &.is-active {
      background: $blue;
      color: $color-text-inverse;
      box-shadow: var(--shadow-primary);

      &:disabled {
        opacity: 1;
        cursor: default;
      }
    }

    &:disabled {
      opacity: 0.5;
      cursor: default;
    }
  }
}

.employees-pagination__ellipsis-button {
  position: relative;
}

.employees-pagination__ellipsis-dots,
.employees-pagination__ellipsis-arrow {
  line-height: 0.5;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.employees-pagination__ellipsis-dots {
  svg {
    width: 16px;
    height: 16px;
  }
}

.employees-pagination__ellipsis-arrow {
  position: absolute;
  opacity: 0;
  transform: translateY(2px);

  svg {
    width: 22px;
    height: 22px;

    &.prev {
      transform: rotate(-180deg);
    }
  }
}

.employees-pagination__ellipsis-button:hover {
  .employees-pagination__ellipsis-dots {
    opacity: 0;
    transform: translateY(-2px);
  }

  .employees-pagination__ellipsis-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme='dark'] {
  .employees-pagination__controls button {
    background: $color-surface-muted;

    &:hover:not(:disabled):not(.is-active) {
      background: $color-surface-hover;
      color: $color-text-heading;
    }

    &.is-active {
      background: $color-primary;
      color: $color-text-inverse;
    }
  }
}

@include tablet-down {
  .employees-pagination {
    justify-content: center;
  }
}
