@bixi-pagination-icon-padding: 0 5px;
@bixi-pagination-wrapper-width: 70px;
@bixi-pagination-wrapper-height: 20px;
@bixi-pagination-wrapper-padding: 0 8px;
@bixi-pagination-wrapper-border-radius: 2px;
@bixi-pagination-wrapper-border: 1px solid #c1c7cd;
@bixi-pagination-wrapper-border-focused: #748ccc;
@bixi-pagination-wrapper-border-hover: #324558;
@bixi-pagination-icon-disabled: #adaeb3;
@bixi-pagination-input-width: 30px;
@bixi-pagination-input-padding: 0;
@bixi-pagination-span-width: 33px;
@bixi-pagination-span-padding: 0 2px;

.bixi-pagination {
  &-content {
    display: flex;
    align-items: center;
  }

  &-icon {
    cursor: pointer;
    transition: color 0.3s;
    user-select: none;

    &-disabled {
      color: @bixi-pagination-icon-disabled;
      cursor: not-allowed;
    }
  }

  &-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: @bixi-pagination-wrapper-width;
    height: @bixi-pagination-wrapper-height;
    transition: border-color 0.3s;

    &-input {
      & &-inner {
        padding: 0;
        text-align: right;
      }
    }

    &-border {
      border: @bixi-pagination-wrapper-border;
      border-radius: @bixi-pagination-wrapper-border-radius;

      &:hover {
        border-color: @bixi-pagination-wrapper-border-hover;
      }

      &&-focused {
        border-color: @bixi-pagination-wrapper-border-focused;
        outline: 0;
      }
    }

    &-split {
      text-align: center;
    }

    &-total {
      text-align: left;
    }
  }
}