@inputNumberPrefixCls: cylon-input-number;


.@{inputNumberPrefixCls} {
  display: flex;
  align-items: center;

  .minus{
    display: inline-block;
    width: @sku-input-number-size;
    height: @sku-input-number-size;
    background: url('../../assets/icon-minute.svg');
    background-size: 100%!important;
    margin-right: @sku-input-number-margin;
    cursor: pointer;
    &.disabled {
      background: url('../../assets/icon-minute-grey.svg');
    }
  }

  .plus{
    display: inline-block;
    width: @sku-input-number-size;
    height: @sku-input-number-size;
    background: url('../../assets/icon-plus.svg');
    background-size: 100%;
    margin-left: @sku-input-number-margin;
    cursor: pointer;
    &.disabled {
      background: url('../../assets/icon-plus-grey.svg');
    }
  }

  input {
    width: @sku-input-number-input-width;
    height: @sku-input-number-input-height;
    background: rgba(0, 0, 0, 0.04);
    border-radius: @sku-input-number-input-radius;
    font-size: @sku-input-number-input-font-size;
    font-weight: @sku-input-number-input-font-weight;
    font-family: var(--regular-font, SFProText-Medium, SFProText);
    color: rgba(0, 0, 0, 0.85);
    border: none;
    vertical-align: text-bottom;
    text-align: center;
  }

  input[type=number] {
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}