.nut-theme-dark {
  .nut-input-number {
    &__icon {
      color: $dark-color;

      &--disabled {
        color: $dark-color-gray;
      }
    }

    input,
    &__text--readonly {
      color: $dark-color;
      background-color: $dark-background;
      border: 1px solid $dark-color-gray;
    }

    &--disabled {
      input {
        color: $dark-color-gray;
      }
    }
  }
}

.nut-input-number {
  box-sizing: $inputnumber-border-box;
  display: $inputnumber-display;
  align-items: center;
  height: $inputnumber-height;
  line-height: $inputnumber-line-height;
  border: $inputnumber-border;
  border-radius: $inputnumber-border-radius;

  &--disabled {
    input {
      color: $inputnumber-icon-void-color;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    color: $inputnumber-icon-color;
    cursor: pointer;

    .nut-icon {
      width: $inputnumber-icon-size;
      height: $inputnumber-icon-size;
      font-size: $inputnumber-icon-size;
    }

    &--disabled {
      color: $inputnumber-icon-void-color;
      cursor: not-allowed;
    }
  }

  input {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  input,
  &__text--readonly,
  &__text--input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $inputnumber-input-width;
    height: 100%;
    margin: $inputnumber-input-margin;
    font-size: $inputnumber-input-font-size;
    color: $inputnumber-input-font-color;
    text-align: center;
    background-color: $inputnumber-input-background-color;
    border: $inputnumber-input-border;
    border-radius: $inputnumber-input-border-radius;
    outline: none;
  }

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