// ============================================================================
// :: Pagination
// ============================================================================
/**
 * The pagination contains two navigational arrows indicating a previous and
 * next page and consists out of a maximum of five numbers shown indicating
 * the different pages available.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-pagination {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-pagination__list {
  padding-left: 0;

  list-style-type: none;
}

.m-pagination__item {
  display: inline-block;

  & + .m-pagination__item {
    margin-left: 0.3rem;

    @include respond-at($breakpoint-tablet-default) {
      margin-left: 0.6rem;
    }
  }
}

.m-pagination__item,
.m-pagination__prev,
.m-pagination__next {
  width: 3.6rem;
  height: 3.6rem;

  border-radius: $border-radius-round;
}

.m-pagination__link,
.m-pagination__prev,
.m-pagination__next {
  display: flex;
  justify-content: center;
  align-items: center;

  text-decoration: none;
}

button.m-pagination__prev,
button.m-pagination__next {
  padding: 0;

  border: none;

  cursor: pointer;
}

.m-pagination__prev,
.m-pagination__next {
  background-color: $background-color-white;

  // Style the icon
  &::before {
    font-size: 2rem;

    color: $text-color-base;
  }
}

.m-pagination__prev {
  @extend %__icon-chevron-left;

  margin-right: 1.5rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-right: 2rem;
  }
}

.m-pagination__next {
  @extend %__icon-chevron-right;

  margin-left: 1.5rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-left: 2rem;
  }
}

.m-pagination__link {
  @extend %__h4-default;

  width: 100%;
  height: 100%;

  color: $text-color-medium;
}

// ============================================================================
// :: States
// ============================================================================
.m-pagination__item {

  &.is-active {
    background-color: $primary-color-base;

    .m-pagination__link {
      color: $text-color-white;
    }
  }
}

.m-pagination__prev,
.m-pagination__next {

  &.is-disabled {
    opacity: 0.3;

    pointer-events: none;

    cursor: no-allowed;
  }
}