@import "../../definitions";

.paginationPageStart {
  display: flex;
  justify-content: flex-end;
  font-size: toRem(16px);
  margin-bottom: toRem(40px);
  &__element {
    display: flex;
    align-items: center;
  }
  &__arrowLink {
    display: flex;
    align-items: center;
    &--prev {
      margin-left: 0.75rem;
      margin-right: 0.4rem;
    }
    &--next {
      margin-left: 0.4rem;
      margin-right: 0.75rem;
    }
  }
  &__prevButton, &__nextButton {
    display: inline-block;
    width: toRem(9px);
    height: toRem(16px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: grayscale(100%) brightness(0);
    @include smooth();
    &--inactive {
      filter: unset;
    }
  }
  &__prevButton {
    background-image: url("/assets/icons/icon_chevron_left.svg");
  }
  &__nextButton {
    background-image: url("/assets/icons/icon_chevron_right.svg");
  }
  &__pageWrapper {
    position: relative;
    width: toRem(40px);
  }
  &__currentPage {
    padding: toRem(2px) toRem(6px);
    background: $color-background-secondary;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    @include smooth();
    &:hover {
      background: $color-background-primary;
    }
  }
  &__pageSelect {
    position: absolute;
    display: none;
    flex-direction: column;
    width: 100%;
    max-height: 500px;
    top: 100%;
    left: 0;
    background: $color-background-secondary;
    border-radius: 2px;
    overflow: auto;
    z-index: 10;
    .page {
      display: block;
      padding: toRem(2px) toRem(6px);
      text-align: center;
      color: #000000;
      &:hover {
        background: $color-background-primary;
      }
      &.active {
        font-weight: $font-weight-medium;
        cursor: pointer;
      }
    }
  }
}