@number-input-class: ~'@{icecream-prefix}-number-input';

.withCtrlSize(@ctrlSize) {
  padding-right: @ctrlSize + @icecream-gap-sm;
  .@{number-input-class}-ctrl {
    width: @ctrlSize;
  }
}

.@{number-input-class} {
  position: relative;
  width: 8em;

  &:hover .@{number-input-class}-ctrl {
    opacity: 1;
  }
  &.@{input-with-color-disabled-class} .@{number-input-class}-ctrl {
    opacity: 0;
  }
  &-ctrl {
    position: absolute;
    right: 0;
    height: 100%;
    background-color: @icecream-color-grey-3;
    display: flex;
    flex-direction: column;
    color: @icecream-color-grey-9;
    border-left: 1px solid @icecream-color-grey-7;
    opacity: 0;
    transition: opacity @icecream-transitions;

    &-increase, &-decrease {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;

      &:hover {
        background-color: @icecream-color-grey-4;
      }
    }

    &-increase {
      border-bottom: 1px solid @icecream-color-grey-7;
    }

    &-disabled {
      cursor: not-allowed;
      color: @icecream-color-grey-7;
      &:hover {
        background-color: inherit;
      }
    }

    &-icon {
      width: 10px;
      height: 10px;
    }
  }

  &.@{input-with-size-class}-size-small {
    .withCtrlSize(@icecream-form-input-height-sm);
  }
  &.@{input-with-size-class}-size-default {
    .withCtrlSize(@icecream-form-input-height-md);
  }
  &.@{input-with-size-class}-size-large {
    .withCtrlSize(@icecream-form-input-height-lg);
  }

  &-no-suffix&.@{text-input-class} .@{text-input-suffix-class} {
    margin-left: 0;
  }
}