.pager-control {
  color: $text--dark;
  margin: 20px 0;
  text-align: center;

  .pagination {
    display: inline-block;

    > * {
      &:first-child {
        a, .first, .last {
          border-bottom-left-radius: 4px;
          border-top-left-radius: 4px;
        }
      }

      &:last-child {
        a, .first, .last {
          border-bottom-right-radius: 4px;
          border-top-right-radius: 4px;
        }
      }
    }

    > div {
      float: left;
    }

    a, .first, .last {
      border: 1px solid $gray;
      border-radius: 0;
      color: $text--dark;
      float: left;
      margin-left: -1px;
      padding: 6px 12px;
      position: relative;
      transition: none;

      &.active {
        background: $blue;
        border-color: $blue;
        color: white;
        z-index: 3;
        &:hover {
          background: $blue;
          border-color: $blue;
        }
      }

      &:hover {
        background: $gray;
        color: white;
      }
    }

    .disabled {
      background-color: $clear-hover;
      color: $text--lightest;
      cursor: default;
      &:hover {
        background-color: $clear-hover;
        color: $text--lightest;
      }
    }
  }
}
