//
// Pagination
// --------------------------------------------------

.pagination {
  display: inline-block;
  margin: 0 0 $padding-base-vertical;
  border-radius: $border-radius-base;
  padding: 0;
  vertical-align: middle;

  @include clearfix();

  > li {
    text-align: center;
    display: block;
    float: left;

    + li {
      margin-left: $padding-small-horizontal;
    }

    &,
    &:first-child,
    &:last-child {
      a,
      span {
        border-radius: $border-radius-base * 2;
      }
    }

    > a,
    > span {
      position: relative;
      float: left;
      margin-left: -1px;
      text-decoration: none;
      background-color: transparent;
      padding: 0 $grid-unit-x;
      height: $grid-unit-y * 4;
      line-height: $grid-unit-y * 4;
      min-width: $grid-unit-y * 4;
      font-weight: $font-weight-regular;
      font-size: $font-size-large;
      background-clip: padding-box;

      @include themes(color, pagination-color);

      &:hover,
      &:focus {
        z-index: 2;

        @include themes(background-color, pagination-hover-bg);
      }

      .fa {
        vertical-align: -6%;
      }
    }

    &.pagination-first:not(.disabled),
    &.pagination-prev:not(.disabled),
    &.pagination-next:not(.disabled),
    &.pagination-last:not(.disabled) {
      > a,
      > span {
        border-radius: $border-radius-base * 2;

        @include themes(color, pagination-color);
        @include themes(background-color, pagination-bg);

        &:hover,
        &:focus {
          z-index: 2;

          @include themes(background-color, pagination-hover-bg);
        }
      }
    }

    &.pagination-first,
    &.pagination-prev,
    &.pagination-next,
    &.pagination-last {
      > a,
      > span {
        width: $grid-unit-y * 4;
        padding: 0;
        font-size: $font-size-extra-small - 1;
      }
    }

    &.disabled {
      > span,
      > span:hover,
      > span:focus,
      > a,
      > a:hover,
      > a:focus {
        cursor: $cursor-disabled;

        @include themes(color, pagination-disabled-color);
        @include themes(background-color, pagination-disabled-bg);
      }
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 3;
      cursor: default;

      @include themes-value(color, $pagination-active-color);
      @include themes-value(background-color, $pagination-active-bg);
    }
  }
}