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

@include tools.layer('components')
  .v-input
    display: grid
    flex: $input-flex
    font-size: $input-font-size
    font-weight: $input-font-weight
    line-height: $input-line-height

    &--disabled
      pointer-events: none

    &--indent-details
      .v-input__details
        padding-inline: $input-details-padding-inline

    @at-root
      @include tools.density('v-input', $input-density) using ($modifier)
        --v-input-control-height: #{$input-control-height + $modifier}
        --v-input-padding-top: #{16px + $modifier * .5}

  .v-input--vertical
    grid-template-areas: "append" "control" "prepend"
    grid-template-rows: max-content auto max-content
    grid-template-columns: min-content

    .v-input__prepend
      margin-block-start: $input-affix-margin-inside

    .v-input__append
      margin-block-end: $input-affix-margin-inside

  .v-input--horizontal
    grid-template-areas: "prepend control append" "a messages b"
    grid-template-columns: max-content minmax(0, 1fr) max-content
    grid-template-rows: 1fr auto

    .v-input__prepend
      margin-inline-end: $input-affix-margin-inside

    .v-input__append
      margin-inline-start: $input-affix-margin-inside

  .v-input__details
    align-items: flex-end
    display: flex
    font-size: $input-details-font-size
    font-weight: $input-details-font-weight
    grid-area: messages
    letter-spacing: $input-details-letter-spacing
    line-height: $input-details-line-height
    min-height: $input-details-min-height
    padding-top: $input-details-padding-above
    overflow: hidden
    justify-content: space-between

  .v-input__details,
  .v-input__prepend,
  .v-input__append
    > .v-icon
      opacity: var(--v-medium-emphasis-opacity)

    .v-input--disabled &,
    .v-input--error &
      > .v-icon,
      .v-messages
        opacity: 1

    .v-input--glow.v-input--focused &
      > .v-icon
        opacity: 1

    .v-input--disabled &
      opacity: var(--v-disabled-opacity)

    .v-input--error:not(.v-input--disabled) &
      > .v-icon,
      .v-messages
        color: rgb(var(--v-theme-error))

  .v-input__prepend,
  .v-input__append
    display: flex
    align-items: flex-start
    padding-top: var(--v-input-padding-top)

    .v-input--center-affix &
      align-items: center
      padding-top: 0

  .v-input__prepend
    grid-area: prepend

  .v-input__append
    grid-area: append

  .v-input__control
    display: flex
    grid-area: control

  .v-input
    &--hide-spin-buttons
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button
        -webkit-appearance: none
        margin: 0
      input[type=number]
        -moz-appearance: textfield

    &--plain-underlined

      .v-input__prepend,
      .v-input__append
        $this: &
        align-items: flex-start

        @at-root
          @include tools.density('v-input', $input-density) using ($modifier)
            @at-root #{selector.append(&, $this)}
              padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)})