@use "../../00-base/00-config/00-variables" as *;
@use "../../00-base/01-helpers" as *;
@use "../../01-atoms/03-lists/list--ul/list--helpers" as *;
@use "../../01-atoms/01-links/00-link/link-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Pager
// *
////////////////////////////////////////////////////////////////////////////////

// ** wrappers
// =============================================================================

.pager--full {
  margin: var(--gap-md) 0;
}

.pager__items--full {
  @include list-reset;
  text-align: center;
  font-size: 0;
}

// ** pager item
// =============================================================================

.pager__item--full {
  display: inline-block;
  margin: 0 rem(1) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);

  &.is-active {
    font-weight: var(--fw-bold);
  }
}

.pager__item--ellipsis {
  display: inline-block;
  padding: 0 rem(2);
  min-width: rem(24);
}

// ** Pager link
// =============================================================================

.pager__link--full {
  display: inline-block;
  padding: 0 rem(2);
  min-width: rem(24);
  line-height: rem(24);
  background-color: transparent;

  &:link,
  &:visited {
    text-decoration: none;
    color: hsl(var(--clr-base));
  }

  &:focus-visible,
  &:hover {
    .page__link__icon {
      &,
      &::before {
        color: hsl(var(--clr-white));
      }
    }

    .page__link__icon--first,
    .page__link__icon--prev {
      left: rem(-3);
    }

    .page__link__icon--next,
    .page__link__icon--last {
      left: rem(-3);
    }
  }

  &.is-active,
  &:focus-visible,
  &:hover {
    color: hsl(var(--clr-white));
    background-color: hsl(var(--clr-spot-1));
  }

  &.is-disabled {
    background-color: hsl(var(--clr-form-disabled));

    .page__link__icon {
      left: 0;
    }
  }

  // ** prev/next
  &.pager__link--prev,
  &.pager__link--next {
    padding: 0 rem(5);
    text-transform: uppercase;
  }

  // ** first/last
  &.pager__link--first,
  &.pager__link--last {
    padding: 0 rem(5);
    text-transform: uppercase;
  }

  // ** Icons
  .page__link__icon {
    position: relative;
    left: 0;
    top: -1px; // visually center vertically
    display: inline-flex;
    align-content: center;
    justify-content: center;
    padding: 0 rem(2);
    min-width: rem(24);
    line-height: rem(24);
    transition: all $duration $easing;

    @include icon((
      color: hsl(var(--clr-base)),
      size: 10,
    ));

    &::before {
      transition: all $duration $easing;
    }

    .is-disabled & {
      opacity: 0.5;
    }

  }

  .page__link__icon--arrow-left,
  .page__link__icon--arrow-right,
  .page__link__icon--double-arrow-left,
  .page__link__icon--double-arrow-right {
    //
  }

  .page__link__icon--arrow-left {
    &::before {
      @include icon-char(chevron-left);
    }
  }

  .page__link__icon--arrow-right {
    &::before {
      @include icon-char(chevron-right);
    }
  }

  .page__link__icon--double-arrow-left {
    &::before {
      @include icon-char(angles-left);
    }
  }

  .page__link__icon--double-arrow-right {
    &::before {
      @include icon-char(angles-right);
    }
  }
}

@include bp-sm {
  .pager__link--full {
    &:is(
      .page__link__icon--first,
      .page__link__icon--prev,
      .page__link__icon--next,
      .page__link__icon--last
    ) {
      a {
        font-size: rem(12);
        line-height: rem(26);

        &::after {
          display: none;
        }
      }
    }
  }
}
