// 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;

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

.page-item {
  &.disabled > span {
    @include plain-hover-focus {
      color: $pagination-disabled-color;
      background-color: $pagination-disabled-bg;
      border-color: $pagination-disabled-border;
    }
  }
}

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

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

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

  .page-link {
    @include hover-focus {
      background-color: transparent;
      border-color: $pagination-gap-hover-border;
    }
  }
}


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

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