@use "tokens" as *;

// Campo numérico con botones -/+ (portado de kontuan).
.numeric-input {
  display: flex;
  align-items: center;
  height: $input-height;
  background-color: $input-bg;
  border: 1px solid $input-border;
  border-radius: $input-radius;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:hover:not(.numeric-input--disabled) { border-color: $input-border-hover; }
  &:focus-within { border-color: $input-border-focus; box-shadow: $input-focus-ring; }
  &--disabled { opacity: $disabled-opacity; cursor: not-allowed; }

  &__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    color: $text-3;
    cursor: pointer;
    transition: color 0.15s;

    &:hover:not(:disabled) { color: $text-1; }
    &:disabled { opacity: 0.3; cursor: not-allowed; }
  }

  &__field {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 $space-1;
    border: none;
    background: none;
    color: $input-text;
    font-family: $k-font-sans;
    font-size: $fs-14;
    text-align: center;
    outline: none;

    &::placeholder { color: $input-placeholder; }
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    -moz-appearance: textfield;
  }
}