@import "../button/index.less";
@import "../input/index.less";

@border-color: #eee;
@hover-border-color: var(--global-primary-color);

@input-number-lg: 44px;
@input-number-lg-wdith: 200px;
@input-number-lg-right: 22px;
@input-number-md: 38px;
@input-number-md-wdith: 160px;
@input-number-md-right: 19px;
@input-number-sm: 32px;
@input-number-sm-wdith: 140px;
@input-number-sm-right: 16px;
@input-number-xs: 26px;
@input-number-xs-wdith: 120px;
@input-number-xs-right: 13px;

.set-size(@width, @size, @right-size) {
  & {
    height: @size;
    width: @width;

    .layui-input {
      height: @size;
      line-height: @size;
      padding: 0 @size;
    }

    .layui-control-btn {
      width: @size;
      height: @size;
      line-height: @size;
      z-index: 1;
    }

    &[position="right"] {
      .layui-input {
        padding: 0 @size 0 0;
      }

      .layui-control-btn {
        height: @right-size;
        line-height: @right-size;
      }

      .layui-subtraction-btn {
        top: @right-size - 1;
      }
    }
  }
}

.layui-input-number + .layui-input-number {
  margin-left: 10px;
}

.layui-input-number {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid @border-color;
  border-color: @border-color;
  border-radius: var(--global-border-radius);
  overflow: hidden;

  .layui-input {
    border: 0;

    input {
      text-align: center;
      padding-left: 0px;
    }
  }

  .layui-control-btn {
    position: absolute;
    box-sizing: border-box;
    border: 0;
    border-color: @border-color;
    border-style: solid;
    border-radius: 0;
    padding: 0;
    text-align: center;
    top: 0;

    &:hover {
      color: @hover-border-color;
    }

    &.layui-subtraction-btn {
      border-right-width: 1px;
    }

    &.layui-addition-btn {
      border-left-width: 1px;
      right: 0;
    }

    .layui-icon {
      padding: 0px;
    }
  }

  .layui-input input::-webkit-outer-spin-button,
  .layui-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .layui-input input[type="number"] {
    -moz-appearance: textfield;
  }

  &[position="right"] {
    .layui-subtraction-btn {
      right: 0;
      border-right-width: 0px;
      border-left-width: 1px;
    }

    .layui-addition-btn {
      border-bottom-width: 1px;
    }
  }

  &[size="lg"] {
    .set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
  }
  &[size="md"] {
    .set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
  }
  &[size="sm"] {
    .set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
  }
  &[size="xs"] {
    .set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
  }
}