// RAMEN PAGINATION COMPONENT
//
//
// Required Global Variables:
// $spacing-xsmall
// $spacing-small
// $font-small
// $base-font-size
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $pagination-item-font: Sets the pagination font
// $pagination-item-font-weight: Sets the pagination font weight
// $pagination-link-color: Sets the pagination font link colour
// $pagination-link-border: Sets the pagination link border
// $pagination-link-hover-bakground-color: Sets the pagination background colour for hover state
// $pagination-link-hover-color: Sets the pagination font colour for hover state
// $pagination-link-active-border: Sets the active pagination item border colour
// $pagination-link-active-background-color: Sets the active pagination item background colour
// $pagination-link-active-color: Sets the active pagination item font colour
//
//

@mixin pagination {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

@mixin pagination-item {
  display: block;
  font-family: $pagination-item-font;
  font-weight: $pagination-item-font-weight;
  margin-right: $spacing-xsmall;
  text-align: center;
  vertical-align: middle;

  &:last-child {
    margin-right: 0;
  }

  &.is-active {
    a,
    button {
      &,
      &:link,
      &:visited {
        background-color: $pagination-link-active-background-color;
        border: $pagination-link-active-border;
        color: $pagination-link-active-color;
        cursor: not-allowed;

        &:hover {
          border: none;
        }
      }
    }
  }

  a,
  button {
    &,
    &:link,
    &:visited {
      background-color: transparent;
      border: $pagination-link-border;
      color: $pagination-link-color;
      display: block;
      font-size: $font-small;
      height: toRems(35px);
      line-height: 2.25;
      padding: 0;
      text-align: center;
      text-decoration: none;
      transition: background-color $global-transition-speed $global-easing,
        color $global-transition-speed $global-easing;
      width: toRems(35px);

      @include breakpoint($bp-medium) {
        font-size: $base-font-size;
        height: toRems(45px);
        line-height: 2.5;
        width: toRems(45px);
      }

      &:hover {
        background-color: $pagination-link-hover-bakground-color;
        color: $pagination-link-hover-color;
      }

      &:focus {
        border: $pagination-link-active-border;
      }
    }
  }
}

.c-pagination {
  @include pagination;

  &__item {
    @include pagination-item;
  }

  &__item-arrow-left {
    @include pagination-item;
    margin-right: $spacing-xsmall;
  }

  &__item-arrow-right {
    @include pagination-item;
  }
}