@import '../styles/vars.less';
@import '../styles/mixins.less';

@prefixCls : cuke-number-input;

.@{prefixCls} {
  width: @cuke-number-input-width;
  &.cuke-input-small {
    width: @cuke-number-input-width-small;
  }
  &.cuke-input-large {
    width: @cuke-number-input-width-large;
  }
  &-group {
    display: inline-flex;
    .cuke-input {
      width: @cuke-number-input-width;
    }
    .cuke-input-group-addon {
      cursor: pointer;
    }
    &.cuke-input-group-small {
      .cuke-input-group-addon {
        padding: 4px;
      }
    }
    &.cuke-input-group-large {
      .cuke-input-group-addon {
        padding: 4px 15px;
      }
    }
  }

  &-wrapper {
    display: inline-block;
  }
  &-stepper {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color @default-transition;
    font-size: 20px;
    &:not(.@{prefixCls}-disabled):hover {
      color: @primary-color;
    }
    &.@{prefixCls}-disabled {
      cursor: not-allowed;
      color: @disabled-font-color;
      border-color: @border-color;
    }
    .@{prefixCls}-stepper-disabled {
      cursor: not-allowed;
      color: @disabled-font-color;
      border-color: @border-color;
    }
  }
  &-disabled-subtract {
    .cuke-input-group-addon:first-child {
      cursor: not-allowed;
      color: @disabled-font-color;
      border-color: @border-color;
      background-color: @disabled-color;
    }
  }
  &-disabled-add {
    .cuke-input-group-addon:last-child {
      cursor: not-allowed;
      color: @disabled-font-color;
      border-color: @border-color;
      background-color: @disabled-color;
    }
  }
  &-group-disabled {
    .cuke-input-group-addon {
      background-color: @disabled-color;
      color: @disabled-font-color;
      cursor: not-allowed;
    }
    .@{prefixCls}-stepper {
      cursor: not-allowed;
      &:hover {
        color: @disabled-font-color;
      }
    }
  }
}
