// Name:            Pagination
//
// Component:       `pagination`
//
// Modifiers:       `pagination-gap`
//                  `pagination-no-border`
//                  `pagination-lg`
//                  `pagination-sm`
//
// Markup:
//
// <!-- pagination -->
// <ul class="pagination">
//     <li class="page-item previous"><a class="page-link" href=""></a></li>
//     <li class="page-item"><a class="page-link" href="#">1</a></li>
//     <li class="page-item"><a class="page-link" href="#">2</a></li>
//     <li class="page-item next"><a class="page-link" href=""></a></li>
// </ul>
//
// ========================================================================

// Variables
// ========================================================================
$pagination-gap-hover-border: $brand-primary !default;

// $pagination-lg-font-size:                   16px !default;

// $pagination-small-font-size:                $font-size-base !default;

// Component: Pagination
// ========================================================================

.page-item {
  // Link
  > span {
    @include hover-focus {
      text-decoration: none; // add from---v3
      transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
    }
    padding: $pagination-padding-y $pagination-padding-x;
    transition: background .2s ease-out, border-color 0s ease-out, color .2s ease-out;
  }

  .icon {
    margin-top: -1px;
  }

  &.active .page-link {
    z-index: 3;
  }

  &.disabled > span {
    @include plain-hover-focus {
      color: $pagination-disabled-color;
      pointer-events: none;
      cursor: $cursor-disabled;
      background-color: $pagination-disabled-bg;
      border-color: $pagination-disabled-border;
    }
  }
}

.page-link {

  @include hover-focus {
    text-decoration: none;
    transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
  }
  transition: background .2s ease-out, border-color 0s ease-out, color .2s ease-out;

  &:focus {
    box-shadow: none; // (remove focus outline style)
  }
}

// Modifier: `pagination-gap`
// -------------------------

.pagination-gap {
  .page-item {
    &.disabled .page-link {
      @include hover-focus {
        border-color: $pagination-disabled-border;
      }
    }

    &:first-child, &:last-child {
      .page-link {
        border-radius: 5px;
      }
    }

    &.active .page-link {
      background-color: $pagination-active-bg;
    }
  }

  .page-link {
    @include hover-focus {
      background-color: transparent;
      border-color: $pagination-gap-hover-border;
    }
    margin: 0 5px;
    border-radius: 5px;
  }
}

// Modifier: `pagination-no-border`
// -------------------------

.pagination-no-border {
  .page-link {
    border: none;
  }
}

// Size Modifier
// ========================================================================

// .pagination-lg {
//   @include pagination-size($padding-large-vertical, $pagination-lg-padding-horizontal, $pagination-lg-font-size, $line-height-lg, $border-radius-large);
// }

// .pagination-sm {
//   @include pagination-size($padding-small-vertical, $pagination-small-padding-horizontal, $pagination-small-font-size, $line-height-sm, $border-radius-small);
// }