@use 'sass:selector'
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-number-input
    $root: &
    $control-root: #{selector.append($root, '__control')}

    input[type="number"]
      -moz-appearance: textfield

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button
        -webkit-appearance: none

    .v-field
      &:not(:has(.v-field__prepend-inner > .v-icon))
        padding-inline-start: 0

      &:not(:has(.v-field__append-inner > .v-icon))
        padding-inline-end: 0

    .v-field__prepend-inner:has(.v-number-input__control) > .v-icon
      margin-inline-end: 12px

    .v-field__append-inner:has(.v-number-input__control) > .v-icon
      margin-inline-start: 12px


    &--inset
      .v-divider
        height: $number-input-inset-divider-size
        width: $number-input-inset-divider-size
        align-self: center

    &--split
      .v-field__input
        text-align: center

    &--stacked
      #{$control-root}
        flex-direction: column-reverse
        .v-btn
          flex: 1

    &--hide-input
      .v-field
        flex: none
        &__input
          width: 0
          padding-inline: 0

    &__control
      display: flex
      height: 100%

      .v-btn
        background-color: transparent
        border-radius: 0