$pagination-color: rgba(0, 0, 0, 0.65) !default;
$pagination-border-color: #d9d9d9 !default;
$pagination-bg-color: white !default;
$pagination-hover-color: #49a9ee !default;
$pagination-hover-border-color: $pagination-hover-color !default;
$pagination-hover-bg-color: $pagination-bg-color !default;
$pagination-active-color: $pagination-bg-color !default;
$pagination-active-bg-color: #108ee9 !default;
$pagination-active-border-color: $pagination-active-bg-color !default;

.mdl-pagination {
  line-height: 28px;

  display: flex;

  justify-content: center;
  &.mdl-pagination--left {
    justify-content: flex-start;
  }
  &.mdl-pagination--right {
    justify-content: flex-end;
  }
  &.mdl-pagination--between {
    justify-content: space-between;
    align-items: center;
  }
  .mdl-pagination--record {
    flex: 1;
  }
  .mdl-pagination--paging {
    a {
      display: inline-block;

      min-width: 28px;
      height: 28px;
      margin-right: 8px;

      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;

      color: $pagination-color;
      border: 1px solid $pagination-border-color;
      background-color: $pagination-bg-color;
      & > span {
        display: block;

        padding: 0 6px;
      }
      &:hover {
        color: $pagination-hover-color;
        border-color: $pagination-hover-border-color;
        background-color: $pagination-hover-bg-color;
      }
      &.active {
        cursor: default;

        color: $pagination-active-color;
        border-color: $pagination-active-border-color;
        background-color: $pagination-active-bg-color;
      }
    }
  }
  .mdl-pagination--jumper {
    display: inline-block;
    input {
      width: 50px;

      transition: all 0.3s;

      color: rgba(0, 0, 0, 0.65);
      border: 1px solid #d9d9d9;
      &:hover,
      &:focus {
        border-color: $pagination-hover-border-color;
      }
      &:focus {
        outline: 0;
        box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2);
      }
    }
    .mdl-button {
      line-height: 24px;

      height: 24px;
      padding: 0;

      color: rgba(0, 0, 0, 0.65);
      border: 1px solid #d9d9d9;
      &:hover {
        color: $pagination-hover-color;
        border-color: $pagination-hover-border-color;
        background: none;
      }
    }
  }
  &.mdl-pagination--mini {
    display: block;
    .mdl-pagination--paging {
      display: flex;

      justify-content: space-between;
    }
    a {
      min-width: auto;
      margin: 0;
      & > span {
        padding: 0 10px;
      }
    }
  }
  .mdl-select {
    .mdl-button {
      padding: 0 10px;
      i {
        right: -10px;
      }
    }
  }
}