@import '../../styles/common';
@import 'mixin';

.@{ns}input-number {
  background: @input-bg;

  &-btn-group-vertical {
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    width: 20px;

    & > .@{ns}btn {
      display: block;
      float: none;
      width: 100%;
      max-width: 100%;
      position: relative;
      border: none;
    }
  }

  &-touchspin-up,
  &-touchspin-down {
    position: relative;
    border-radius: 0;
    padding: 0;
    color: @number-input-button-color;
    // Default sie.
    .input-touchspin(base);

    //sizes
    .@{ns}input-group-lg & {
      .input-touchspin(large);
    }

    .@{ns}input-group-sm & {
      .input-touchspin(small);
    }

    .@{ns}input-group-xs & {
      .input-touchspin(extra-small);
    }

    > .@{ns}icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      font-size: @number-input-touchspin-font-size;
    }
  }

  &-btn-group-vertical:last-child &-touchspin-up {
    border-top-right-radius: @border-radius-base;
  }

  &-btn-group-vertical:last-child &-touchspin-down {
    border-bottom-right-radius: @border-radius-base;
  }

  > .@{ns}input {
    .border-left-radius(@border-radius-base) !important;
  }

  // Reset Input Number styling
  // Reference https://stackoverflow.com/questions/26024771/styling-a-input-type-number#answer-40189766
  input[type='number'] {
    appearance: textfield;

    &::-webkit-inner-spin-button {
      /* stylelint-disable */
      -webkit-appearance: none;
    }
  }
}