@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 *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Mini pager
// *
////////////////////////////////////////////////////////////////////////////////

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

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

.pager__items--mini {
  @include list-reset;

  text-align: center;
}

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

.pager__item--mini {
  display: inline;
  margin: 0 rem(10);

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

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

.pager__link--mini {
  display: inline-block;
  background-color: hsl(var(--clr-spot-1));

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

  &:focus-visible,
  &:hover {
    .page__link__icon--prev {
      left: -3px;
    }

    .page__link__icon--next {
      left: 3px;
    }
  }

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

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

  .page__link__icon {
    position: relative;
    left: 0;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    padding: 0 rem(2);
    min-width: rem(32);
    line-height: rem(32);
    transition: all $duration $easing;

    .is-disabled & {
      opacity: .5;
    }
  }

  .page__link__icon--prev {
    @include icon((
      icon: chevron-left,
      color: hsl(var(--clr-white)),
      size: 14,
    ));
  }

  .page__link__icon--next {
    @include icon((
      icon: chevron-right,
      color: hsl(var(--clr-right)),
      size: 14,
    ));
  }
}
