.@{css-prefix}pagination {
  display: inline-block;
  color: @pagination-color;
  ul.bui-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    font-weight: 400;
    li.bui-pagination-total-text {
      display: inline-block;
      margin-right: 16px;
      vertical-align: top;
      font-size: @font-size-md;
    }
    li.bui-pagination-ellipsis {
      display: inline-block;
      font-size: @font-size-md;
      margin: 0 4px;
    }
    li.bui-pagination-prev,
    li.bui-pagination-next,
    li.bui-pagination-num {
      cursor: pointer;
      display: inline-block;
      font-size: @font-size-sm;
      text-align: center;
      border-radius: @border-radius-base;
      border: 1px solid;
      border-color: @pagination-num-border;
      >a {
        padding: 0 5px;
      }
      &:hover {
        border: 1px solid;
        border-color: @primary-color;
        >a {
          color: @pagination-num-hover-color;
        }
      }
    }
    li.bui-pagination-num {
      margin: 0 4px;
      &.active{
        border: 1px solid;
        border-color: @pagination-num-active-border;
        background-color: @pagination-num-active-bg;
        >a {
          color: @pagination-num-active-color;
        }
        &:hover {
          border: 1px solid;
          border-color: @pagination-num-active-hover-border;
          >a {
            color: @pagination-num-active-hover-color;
          }
        }
      }
    }
    .bui-pagination-icon {
      vertical-align: top;
      fill: @text-color-1;
      font-size: @font-size-md;
    }
    li.bui-pagination-prev {
      margin-right: 4px;
    }
    li.bui-pagination-next {
      margin-left: 4px;
    }
    li.bui-pagination-prev,
    li.bui-pagination-next{
      &.disabled{
        background: @pagination-prev-next-disabled-bg;
        border: 1px solid;
        border-color: @pagination-prev-next-disabled-border;
        cursor: not-allowed;
        > a {
          color: @pagination-prev-next-disabled-color;
        }
      }
      &:hover,
      &:focus,
      &.focus {
        .bui-pagination-icon {
          fill: @pagination-prev-next-icon-hover-color;
        }
      }
      &:active,
      &.active {
        .bui-pagination-icon {
          fill: @pagination-prev-next-icon-active-color;
        }
      }
      &.disabled {
        .bui-pagination-icon {
          fill: @pagination-prev-next-icon-disabled-color;
        }
      }
    }
    li.bui-pagination-size-changer {
      display: inline-block;
      line-height: 0;
      margin-left: 16px;
      vertical-align: top;
      width: 92px;
      .bui-input {
        padding-right: 24px;
      }
    }
    li.bui-pagination-quick-jumper {
      display: inline-block;
      line-height: 0;
      margin-left: 16px;
      font-size: 0;
      .@{css-prefix}input {
        display: inline-block;
        width: 56px;
      }
      .bui-pagination-jumper-text {
        display: inline-block;
        margin-left: 8px;
        vertical-align: top;
        font-size: @font-size-md;
        color: @pagination-quick-jumper-color;
        cursor: pointer;
        &:hover,
        &:focus,
        &.focus {
          color: @pagination-quick-jumper-hover-color;
        }
        &:active,
        &.active {
          color: @pagination-quick-jumper-active-color;
        }
      }
    }
    li.bui-pagination-quick-jumper,
    li.bui-pagination-simple-content {
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
      }

      input[type=number] {
        -moz-appearance:textfield; /* Firefox */
      }
    }
  }
  &-filled {
    ul.bui-pagination-list {
      li.bui-pagination-num,
      li.bui-pagination-prev:not([class~="disabled"]),
      li.bui-pagination-next:not([class~="disabled"]) {
        border-color: @pagination-filled-num-border;
        background-color: @pagination-filled-num-bg;
        &:hover {
          border-color: @pagination-filled-num-hover-border;
          background-color: @pagination-filled-num-hover-bg;
          >a {
            color: @pagination-filled-num-hover-color;
          }
        }
        &:active {
          border-color: @input-filled-active-bg;
          background-color: @pagination-filled-num-active-bg;
        }

      }
    }
  }

  &&-filled.@{css-prefix}pagination-plain {
    ul.bui-pagination-list {
      li.bui-pagination-num {
        &:hover {
          border-color: @pagination-plain-filled-num-hover-border;
          background-color: @pagination-plain-filled-num-hover-bg;
        }
        &:active,
        &.active {
          border: 1px solid;
          border-color: @pagination-plain-filled-num-active-border;
          background-color: @pagination-plain-filled-num-active-bg;
        }
      }
    }
    &.@{css-prefix}pagination-disabled {
      ul.bui-pagination-list {
        li.bui-pagination-num {
          &.active {
            &:hover {
              border-color: @pagination-num-active-disabled-border;
            }
            border-color: @pagination-num-active-disabled-border;
          }
          &.active {
            &:hover {
              background-color: @pagination-num-active-hover-disabled-bg;
              border-color: @pagination-num-active-disabled-border;
            }
          }
        }
      }
    }
  }
  &.@{css-prefix}pagination-disabled {
    ul.bui-pagination-list {
      li.bui-pagination-ellipsis {
        span {
          color: @pagination-ellipsis-disabled-color;
        }
      }
      li.bui-pagination-prev,
      li.bui-pagination-next,
      li.bui-pagination-num {
        &,
        &:hover,
        &.active {
          cursor: not-allowed;
          border-color: @pagination-num-hover-disabled-border;
          background-color: @pagination-num-hover-disabled-bg;
          >a {
            color: @pagination-num-hover-disabled-color;
            .bui-pagination-icon {
              fill: @pagination-num-icon-hover-disabled-color;
            }
          }
        }
        &.active {
          background-color: @pagination-num-active-disabled-bg;
          border-color: @pagination-num-active-disabled-border;
          & > a {
            color: @pagination-num-active-disabled-color;
          }
        }
      }
      li.bui-pagination-size-changer {
        color: @pagination-size-changer-disabled-color;
        border-color: @pagination-size-changer-disabled-border;
        background-color: @pagination-size-changer-disabled-bg;
      }
      li.bui-pagination-quick-jumper {
        .@{css-prefix}input {
          border-color: @pagination-quick-jumper-disabled-border;
          background-color: @pagination-quick-jumper-disabled-bg;
          cursor: not-allowed;
        }
        .bui-pagination-jumper-text {
          color: @pagination-quick-jumper-disabled-color;
          cursor: not-allowed;
        }
      }
    }
  }

  &.@{css-prefix}pagination-plain,
  &.@{css-prefix}pagination-plain.@{css-prefix}pagination-disabled {
    ul.bui-pagination-list {
      li.bui-pagination-prev,
      li.bui-pagination-next,
      li.bui-pagination-num {
        &,
        &:hover {
          background-color: @pagination-plain-num-bg;
          border-color: @pagination-plain-num-border;
        }
      }
    }
  }

  &.@{css-prefix}pagination-simple,
  &.@{css-prefix}pagination-simple.@{css-prefix}pagination-disabled {
    ul.bui-pagination-list {
      li.bui-pagination-prev {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0;
        margin-right: -1px;
      }
      li.bui-pagination-next {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin: 0;
        margin-left: -1px;
      }
      li.bui-pagination-simple-content {
        display: inline-block;
        font-size: @font-size-sm;
        .bui-input {
          width: 56px;
          border-radius: 0;
          text-align: center;
        }
        .@{css-prefix}dropdown-menu {
          height: 148px;
        }
        .bui-pagination-simple-content-input {
          .@{css-prefix}input {
            display: inline-block;
            width: auto;
            .bui-input {
              border-radius: @border-radius-base;
            }
          }
        }
        .bui-pagination-simple-content-input {
          padding: 0 12px 0 17px;
        }
        .bui-pagination-simple-content-total {
          padding: 0 17px 0 8px;
        }
      }
    }
  }
}




.pagination-hover-style (@size) {
  &.@{css-prefix}pagination-simple:not(.@{css-prefix}pagination-disabled):not(.@{css-prefix}pagination-plain) {
    ul.bui-pagination-list {
      li.bui-pagination-prev:not(.disabled):hover {
        position: relative;
        z-index: @pagination-border-zindex;
        min-width: @size + 1px;
        margin-right: -1px;
        border-right: 1px solid @primary-color;
      }
      li.bui-pagination-next:not(.disabled):hover {
        position: relative;
        z-index: @pagination-border-zindex;
        min-width: @size + 1px;
        margin-left: -1px;
        border-left: 1px solid;
        border-left-color: @primary-color
      }
    }
  }
}

.pagination-height(@size) {
  .pagination-hover-style(@size);
  ul.bui-pagination-list {
    li.bui-pagination-total-text {
      height: @size;
      line-height: @size;
    }
    li.bui-pagination-prev,
    li.bui-pagination-next,
    li.bui-pagination-num {
      line-height: @size - 2px;
      height: @size;
      min-width: @size;
    }
    li.bui-pagination-quick-jumper {
      .bui-pagination-jumper-text {
        height: @size;
        line-height: @size;
      }
    }
  }
  .bui-pagination-icon {
    margin-top: ((@size - 16px) / 2);
  }
}

.@{css-prefix}pagination-xs {
  .pagination-height(@pagination-height-xs);
}
.@{css-prefix}pagination-sm {
  .pagination-height(@pagination-height-sm);
}

.@{css-prefix}pagination-rtl {
  direction: rtl;
  ul.bui-pagination-list {
    li.bui-pagination-quick-jumper {
      margin-left: 0;
      margin-right: 16px;
      .bui-pagination-jumper-text {
        margin-left: 0;
        margin-right: 8px;
      }
    }
    li.bui-pagination-prev {
      margin-right: 0;
      margin-left: 4px;
    }
    li.bui-pagination-next {
      margin-right: 4px;
      margin-left: 0;
    }
li.bui-pagination-size-changer {
  margin-left: 0;
  margin-right: 16px;
}
  }
  &.@{css-prefix}pagination-simple {
    &, &.@{css-prefix}pagination-disabled {
      ul.bui-pagination-list {
        li.bui-pagination-next {
          border-top-left-radius: @border-radius-base;
          border-bottom-left-radius: @border-radius-base;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          margin-right: -1px;
          margin-left:0;
        }
        li.bui-pagination-prev {
          border-top-right-radius: @border-radius-base;
          border-bottom-right-radius: @border-radius-base;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          margin-left: -1px;
          margin-right: 0;
        }
      }
    }
  }
}