.paginator {
  li {
    display: inline-block;
    margin: 0 0.1em;
    padding: 0;

    a,
    .btn-link {
      display: inline-block;
      min-width: 29px;
      padding: 6px 0;
      text-align: center;
      color: @grayDark;
      text-decoration: none;
      font-size: (@baseFontSize + 3);
      border-radius: @borderRadiusS;
      background: transparent;
      line-height: 1.1;

      &:hover,
      &:focus {
        color: @white;
        background: tint(@linkColor, 20%);

        .vicon {
          color: @white;
        }
      }
      &:active {
        background: @linkColor;
      }

      &.btn-pagination {
        vertical-align: baseline;
        .padding (@rtl, (@spacingXs + 1), 13px, (@spacingXs + 1), 13px);
      }
    }

    &.arrow {
      .vicon {
        font-size: 9px;
        position: relative;
        top: -1px;
      }
    }

    &.disabled {
      a,
      .btn-link {
        background: transparent;
        cursor: default;
        color: @grayLight;

        .vicon {
          color: @grayLight;
        }
      }
    }

    &.ellipsis {
      span {
        margin: 0 @spacingXs;
        display: inline-block;
      }
    }

    &.active {
      a,
      .btn-link {
        background: @grayLight;
        cursor: default;
        color: inherit;
      }
    }
  }
}

.paginator-multi {
  li {
    padding: 0;
    margin: 0 2px;
    a {
      outline: none;
      &:focus {
        outline: thin dotted;
      }
    }
  }

  .multi {
    position: relative;

    &.open {
      .multi-list {
        opacity: 1;
        visibility: visible;
        top: 50%;
      }
    }

    .multi-list {
      position: absolute;
      z-index: 100;
      left: 0;
      top: 100%;
      width: 100%;
      max-height: 185px;
      overflow-x: hidden;
      visibility: hidden;
      opacity: 0;
      border: 1px solid @borderColor;
      .transition(opacity 0.5s);
      background: @white;
      box-shadow:
        inset 0 7px 21px -17px rgba(0, 0, 0, 0.7),
        inset 0 -7px 21px -17px rgba(0, 0, 0, 0.6);
    }

    .paginator-btn {
      padding-left: @spacingS;
      padding-right: @spacingXs;

      .vicon {
        margin-right: 0;
        margin-left: -2px;
        font-size: 7px;
      }
    }

    ul {
      width: 150%;
      max-height: 183px;
      overflow-y: scroll;
      border-radius: @borderRadiusS;

      li {
        margin: 0;
        padding: 0;
        display: block;

        a {
          display: block;
          text-align: center;
          border: 0 none;
          padding: 5px 10% 5px 0;
          background: none;
          border-radius: 0;
          box-shadow: none;
          outline: none;
          filter: none;

          &.active, &:hover, &:focus {
            background: tint(@linkColor, 20%);
          }

          &.active {
            border: 1px solid @borderColor;
            border-width: 1px 0;
          }
        }
      }
    }
  }
}