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

.v-input
  display: grid
  flex: 1 1 auto
  font-size: $input-font-size
  font-weight: $input-font-weight
  line-height: $input-line-height

  &--disabled
    pointer-events: none

  @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: auto 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--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)})