@import "../settings/variables";
@import "../tools/typography";

:export {
  prefixFontSize: $typography-sm-font-size;
  prefixFontFamily: "inherit";
  prefixRightPadding: spacing(sm);
  inputDefaultXPadding: spacing(md);
}

$incrementer-width: 24px;

.number-input {
  $root: &;
  $error: #{&}--error;
  $input: #{&}__input;
  $incrementer: #{&}__incrementer;
  $incrementer-btn: #{&}__incrementer-button;

  position: relative;

  &--with-incrementer {
    #{$root}__input {
      padding-right: spacing(md) + $incrementer-width;
    }
  }

  &--error {
    #{$incrementer-btn},
    #{$incrementer-btn}:disabled,
    #{$incrementer-btn}:hover {
      background-color: $input-error-background-color;
    }

    #{$input}:focus + #{$incrementer} {
      #{$incrementer-btn} {
        background-color: $number-input-background;
      }
    }
  }

  &__prefix {
    align-items: center;
    display: inline-flex;
    height: 100%;
    left: spacing(md);
    position: absolute;
    @include typography-sm($number-input-prefix-color, 400);

    &--disabled {
      color: $core-gray-70;
    }
  }

  &__incrementer {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 100%;
  }

  &__incrementer-button {
    $input-border: $input-border-color $input-textarea-border-style
      $input-textarea-border-width;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: $incrementer-width;
    height: calc(50% - 1px);
    border: none;
    border-radius: 0px;
    outline: none;
    background-color: $number-input-background;
    border-color: $input-border-color;
    padding: 0;
    cursor: pointer;

    &:first-child {
      border-left: $input-border;
      border-top-right-radius: 2px;
      &:disabled {
        border-color: $input-disabled-border-color;
      }
    }

    &:last-child {
      border-top: $input-border;
      border-left: $input-border;
      border-bottom-right-radius: 2px;
      &:disabled {
        border-color: $input-disabled-border-color;
      }
    }

    svg {
      fill: $number-input-incrementer-btn-color;
    }

    &:hover {
      background-color: $number-input-background;
      border-color: $input-border-color;

      svg {
        fill: $number-input-incrementer-btn-color-hover;
      }
    }

    &:disabled {
      background-color: $number-input-background;
      border-color: $input-border-color;
      cursor: default;

      svg {
        fill: $input-disabled-text-color;
      }
    }
  }
}