@use "../../style/variables" as *;
@use '../../input/style/mixin' as *;

.#{$prefix}-input-number {
  position: relative;
  box-sizing: border-box;
  width: 100%;

  --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
  --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));

  &:hover {
    .#{$prefix}-input-number__controls {
      opacity: 1;
    }
  }

  &__input {
    @include input-default;

    height: var(--ty-input-number-height-current);
    font-size: var(--ty-input-number-font-size-current);
    line-height: var(--ty-line-height-base);
    padding-left: var(--ty-input-number-input-padding-inline-start, var(--ty-input-number-padding-inline-current));
    padding-right: var(--ty-input-number-input-padding-inline-end, calc(var(--ty-input-number-padding-inline-current) + 20px));

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

  &__controls {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ty-input-number-controls-padding);
    opacity: 0;
    transition: all var(--ty-input-number-control-transition-duration);
  }

  &__up,
  &__down {
    cursor: pointer;
    box-sizing: border-box;
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--ty-input-number-control-padding-inline);
    border-left: 1px solid var(--ty-input-number-control-border);
    transition: all var(--ty-input-number-control-transition-duration);

    &:hover {
      flex: 2;

      .ty-icon {
        color: var(--ty-input-number-icon-color-hover) !important;
      }
    }

    &:active {
      background-color: var(--ty-input-number-control-active-bg);
    }
  }

  &__up {
    border-bottom: 1px solid var(--ty-input-number-control-border);
  }

  &__down {
    padding-top: 1px;
  }


  &__icon {
    color: var(--ty-input-number-icon-color);

    &_reverse {
      transform: rotate(180deg);
    }
  }

  &_sm {
    --ty-input-number-height-current: var(--ty-input-number-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
    --ty-input-number-font-size-current: var(--ty-input-number-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm, 8px));
  }

  &_md {
    --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
    --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));
  }

  &_lg {
    --ty-input-number-height-current: var(--ty-input-number-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
    --ty-input-number-font-size-current: var(--ty-input-number-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
    --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg, 16px));
  }

  &_disabled {
    .#{$prefix}-input-number {
      &__input {
        @include input-default-disabled;
      }

      &__up,
      &__down {
        cursor: not-allowed;

        .ty-icon {
          color: var(--ty-input-number-icon-color) !important;
        }

        &:hover {
          flex: 1;
        }

        &:active {
          background-color: transparent;
        }
      }
    }
  }

  &_always-controls {
    .#{$prefix}-input-number__controls {
      opacity: 1;
    }
  }
}