/**
* Mixins to content list.
*/

@mixin pagination {
  display: flex;
  flex-direction: column;
  row-gap: $spacing-20;
  padding: $spacing-24 0;

  @include media-up(md) {
    padding: $spacing-48 0;
    display: block;
  }
}

@mixin pagination-wrapper {
  display: flex;
  align-items: center;
  column-gap: $spacing-12;
  justify-content: flex-end;

  @include media-up(md) {
    column-gap: $spacing-40;
  }
}

@mixin pagination-quantity {
  text-align: right;

  &.mobile {
    @include media-up(md) {
      display: none;
    }
  }

  &.desktop {
    display: none;

    @include media-up(md) {
      display: block;
    }
  }
}

@mixin pagination-page-list {
  display: flex;
  row-gap: $spacing-8;
  column-gap: $spacing-8;
}

@mixin pagination-page-item {
  display: none;

  &::before {
    height: $spacing-40;
    padding: 0 $spacing-8;
    display: flex;
    align-items: center;
    justify-content: center;

    @include media-up(md) {
      padding: 0 $spacing-16;
    }
  }

  &.current,
  &:last-child,
  &:first-child {
    display: block;
  }

  &.next {
    &:nth-child(2) {
      display: block;
    }

    &:nth-last-child(2):not(:nth-child(2)) {
      @include pagination-page-item-ellipsis;

      display: block;
    }

    @include media-up(pagination) {
      display: block;

      &:nth-last-child(2):not(:nth-child(2)) {
        > * {
          display: inline-block;
        }

        &::before {
          content: none;
        }
      }
    }
  }

  &.secondNext {
    display: block;

    &:not(:last-child) {
      @include pagination-page-item-ellipsis;
    }
  }

  &.previous {
    &:nth-last-child(2) {
      display: block;
    }

    &:nth-last-child(3):not(:first-child) {
      @include pagination-page-item-ellipsis;

      display: block;
    }

    @include media-up(pagination) {
      display: block;

      &:nth-last-child(3):not(:first-child) {
        > * {
          display: inline-block;
        }

        &::before {
          content: none;
        }
      }
    }
  }

  &.secondPrevious {
    &:nth-last-child(3):not(:first-child) {
      @include pagination-page-item-ellipsis;

      display: block;
    }

    @include media-up(pagination) {
      display: block;

      &:not(:first-child) {
        @include pagination-page-item-ellipsis;
      }
    }
  }
}

@mixin pagination-page-item-ellipsis {
  > * {
    display: none;
  }

  &::before {
    content: '-';
  }
}

@mixin pagination-page-link {
  @include btn-primary;

  min-height: 0 !important;
  height: $spacing-40 !important;
  padding: 0 $spacing-12 !important;
  min-width: auto !important;
  min-width: $spacing-40 !important;
  background-color: transparent;
  border: 1px solid $color-black;

  @include media-up(md) {
    padding: 0 $spacing-16 !important;
  }

  &.current {
    @include btn-primary-active;
  }
}

@mixin pagination-previous {
  @include media-down(md) {
    @include btn-icon;
  }

  @include media-up(md) {
    @include link-icon-left;
  }

  margin-left: 0;
  margin-right: auto;

  &::before {
    mask-image: url('@/assets/icons/arrow-left.svg');
  }

  &.disabled {
    color: $color-gray;
    opacity: 1;
  }
}

@mixin pagination-next {
  @include media-down(md) {
    @include btn-icon;
  }

  @include media-up(md) {
    @include link-icon-right;
  }

  &::before {
    mask-image: url('@/assets/icons/arrow-right.svg');
  }

  &.disabled {
    color: $color-gray;
    opacity: 1;
  }
}