@use 'sass:map';

@use './shared' as *;
@use './design' as *;
@use './input.scss' as input;

$number-input: () !default;
$number-input: map.merge(
  (
    control-color-out: value('color-error-base')
  ),
  $number-input
);

.#{$namespace}-number-input {
  &-vars {
    @include define-preset-values('number-input', $number-input);
  }

  @include basis;
  @include input.handler;

  @at-root {
    & {
      padding-inline-end: calc(value('input-h-padding') + 20px);
    }
  }

  &--out-of-range &__control {
    color: value('number-input-control-color-out');
  }

  &__clear {
    @include clean-button;
  }

  &__clear,
  &__loading {
    inset-inline-end: calc(value('input-h-padding') + 20px);
  }

  &__plus,
  &__minus {
    position: absolute;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 50%;
    color: value('input-icon-color');
    cursor: pointer;
    user-select: none;
    border: value('input-border');
    border-width: 0;
    border-inline-start-width: value('border-width');
    transition: value('transition-color');

    .#{$namespace}-icon {
      pointer-events: none;
    }

    &:hover,
    &--holding {
      color: value('input-icon-color-hover');
    }

    &--disabled {
      &,
      &:hover {
        color: value('input-control-color-disabled');
        cursor: not-allowed;
      }
    }

    @extend %disabled-item;
  }

  &__plus {
    top: 0;
  }

  &__minus {
    bottom: 0;
    border-top-width: 1px;
  }

  $focused: #{&}--focused;
  $clear: #{&}__clear;
  $loading: #{&}__loading;
  $plus: #{&}__plus;
  $minus: #{&}__minus;

  $padding: value('input-v-padding') value('input-h-padding');

  &--control-fade {
    padding: $padding;
    transition:
      padding value('transition-base'),
      value('transition-background'),
      value('transition-border'),
      value('transition-shadow');

    #{$plus},
    #{$minus} {
      opacity: 0%;
      transition: value('transition-color'), value('transition-opacity');
    }

    &:hover,
    &:focus,
    &#{$focused} {
      padding-inline-end: calc(value('input-h-padding') + 20px);

      #{$plus},
      #{$minus} {
        opacity: 100%;
      }
    }
  }

  &--control-left {
    padding: $padding;
    padding-inline-start: calc(value('input-h-padding') + 20px);

    #{$clear},
    #{$loading} {
      inset-block-end: auto;
      inset-inline-start: calc(value('input-h-padding') + 20px);
    }

    #{$plus},
    #{$minus} {
      inset-inline: 0 auto;
      border-inline-width: 0 value('border-width');
    }
  }

  &--control-left#{&}--control-fade {
    padding: $padding;

    &:hover,
    &:focus,
    &#{$focused} {
      padding-inline-start: calc(value('input-h-padding') + 20px);
    }
  }

  &--control-none {
    padding: $padding;

    #{$clear},
    #{$loading} {
      inset-inline: auto;
    }

    #{$plus},
    #{$minus} {
      display: none;
    }
  }
}