$ui-paginator-bg-color: #fff !default;
$ui-paginator-border-color: #dee2e6 !default;
$ui-paginator-active-color: #2e6aff !default;

@mixin ui-paginator() {

  .ui-paginator {
    display: block;

    .paginator-items {
      display: flex;
      margin: 0;
      padding-left: 0;
      list-style: none;
    }

    .paginator-link {
      position: relative;
      display: block;
      padding: .5em .75em;
      margin-left: -1px;
      line-height: 1.25;
      text-decoration: none;
      min-width: 2.25em;
      text-align: center;
      color: $ui-paginator-active-color;
      background-color: $ui-paginator-bg-color;
      border: 1px solid $ui-paginator-border-color;

      &:hover {
        z-index: 1;
        color: $ui-paginator-active-color;
        text-decoration: none;
        background-color: #f4f4f4;
        border-color: darken($ui-paginator-border-color, 5%);
      }

      &:focus {
        z-index: 2;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
      }
    }

    .paginator-item.active .paginator-link {
      z-index: 3;
      color: #fff;
      background-color: $ui-paginator-active-color;
      border-color: $ui-paginator-active-color;
    }

    .paginator-item.disabled .paginator-link {
      color: #6c757d;
      pointer-events: none;
      cursor: auto;
      background-color: #fff;
      border-color: $ui-paginator-border-color;
    }
  }

}