@use 'sass:math'
@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

  --v-input-chips-margin-top: #{$input-chips-margin-top}

  &--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: #{15px + $modifier * .5}

    @include tools.density('v-input', $input-chips-margin-bottom) using ($modifier)
      --v-input-chips-margin-bottom: #{0px + math.div($modifier, 2)}

.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