@import "settings.colors";

@import "mixins/tools.mixins";

// Pagination for Search page.
// -----

// center the nav
.c-search-pager {
  margin: 0 auto;
}

// remove default ul styles
.c-search-pager__list {
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
}

// center all the things
.c-search-pager__list,
.c-search-pager__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

// common anchor styles
.c-search-pager__item {
  width: rem(44);
  height: rem(44);
  text-decoration: none;
}

// numeric - page links
.c-search-pager__item--num {
  @include font-pratt-bold;
  font-size: rem(25);
  line-height: rem(27);
  letter-spacing: rem(0.44);
  color: $color-grey-660;

  &:hover, &:focus {
    text-decoration: underline;
    background-color: $color-stone-150;
  }
}

// first, previous, next, and last - page links
.c-search-pager__item--arrow {
  text-decoration: none;

  &:hover, &:focus {
    background-color: $color-stone-150;
  }
  &:active {
    background-color: $color-stone-200;
    .c-search-pager__icon {
      stroke: $color-grey-700;
    }
  }

  .c-search-pager__icon {
    stroke: $color-grey-300;
    width: rem(14);
    height: rem(14);
  }
}

// prevent hover and focus states
.c-search-pager__item[aria-current],
.c-search-pager__item[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

// common active states for index anchors
.c-search-pager__item:active,
.c-search-pager__item[aria-current] {
  text-decoration: none;
  border: 1px solid $color-stone-500;
  background-color: $color-stone-150;
  opacity: .9;
}

// disabled state for arrow anchors
.c-search-pager__item[aria-disabled="true"] {
  .c-search-pager__icon {
    stroke: $color-grey-100;
  }
}
