code-lab/node_modules/vuetify/lib/components/VTextField/VTextField.sass

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

@include tools.layer('components')
  /* region BLOCK */
  .v-text-field
    input
      color: inherit
      opacity: 0
      flex: $text-field-input-flex
      transition: $text-field-input-transition
      min-width: 0

      &:focus,
      &:active
        outline: none

      // Remove Firefox red outline
      &:invalid
        box-shadow: none

    .v-field
      cursor: text

    .v-field__input
      @at-root #{selector.append('.v-text-field--prefixed', &)}
        --v-field-padding-start: #{$text-field-input-padding-start}

      @at-root #{selector.append('.v-text-field--suffixed', &)}
        --v-field-padding-end: #{$text-field-input-padding-end}

    .v-input__details
      padding-inline: $text-field-details-padding-inline
      @at-root #{selector.append('.v-input--plain-underlined', &)}
        padding-inline: 0

    .v-field--no-label,
    .v-field--active
      input
        opacity: 1

    .v-field--single-line
      input
        transition: none

  /* endregion */
  /* region ELEMENTS */
  .v-text-field
    &__prefix,
    &__suffix
      align-items: center
      color: $text-field-affix-color
      cursor: default
      display: flex
      opacity: 0
      transition: inherit
      white-space: nowrap
      min-height: $field-input-min-height
      padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0))
      padding-bottom: var(--v-field-padding-bottom, 6px)

      .v-field--active &
        opacity: 1

      .v-field--disabled &
        color: $text-field-disabled-affix-color

    &__prefix
      padding-inline-start: var(--v-field-padding-start)

    &__suffix
      padding-inline-end: var(--v-field-padding-end)

  /* endregion */