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

// .pagination {
  
//   > .nav-link.active, .nav-link.active:hover {
//     color: $pagination-active-color;
//     background-color: $pagination-active-bg;
//     border-color: $pagination-active-border;
//   }

//   > .disabled {
//     > span,
//     > span:hover,
//     > span:focus,
//     > .page-link,
//     > .page-link:hover,
//     > .page-link:focus {
//       color: $pagination-disabled-color;
//       background-color: $pagination-disabled-bg;
//       border-color: $pagination-disabled-border;
//     }
//   }
// }

.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;
  }
}