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

@include tools.layer('components')
  /* region BLOCK */
  .v-text-field
    input
      color: inherit
      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

      &:not(.v-field--reverse)
        .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-field--reverse
        .v-field__input
          @at-root #{selector.append('.v-text-field--prefixed', &)}
            --v-field-padding-end: #{$text-field-input-padding-start}

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

      &:not(.v-field--no-label, .v-field--active)
        input::placeholder
          opacity: 0

    .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
      @at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
        padding-inline-start: var(--v-field-padding-start)
      @at-root #{selector.nest('.v-field.v-field--reverse', &)}
        padding-inline-end: var(--v-field-padding-end)

    &__suffix
      @at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
        padding-inline-end: var(--v-field-padding-end)
      @at-root #{selector.nest('.v-field.v-field--reverse', &)}
        padding-inline-start: var(--v-field-padding-start)

  /* endregion */