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

@include tools.layer('components')
  .v-textarea
    --v-textarea-max-height: initial

    .v-field
      --v-textarea-control-height: var(--v-input-control-height)

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

    .v-field__field
      --v-input-control-height: var(--v-textarea-control-height)

    .v-field__input
      max-height: var(--v-textarea-max-height)

      $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px)
      $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px)
      $c: calc(100% - var(--v-textarea-scroll-bar-width, 16px))

      flex: 1 1 auto
      outline: none

      -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b), linear-gradient(to right, transparent, transparent $c, black $c)
      mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b), linear-gradient(to right, transparent, transparent $c, black $c)

      &.v-textarea__sizer
        visibility: hidden
        position: absolute
        top: 0
        left: 0
        pointer-events: none

        @include tools.layer('overrides')
          height: 0
          min-height: 0

    &--no-resize
      .v-field__input
        resize: none

    textarea
      flex: 1
      min-width: 0
      height: 100%
      transition: .15s opacity settings.$standard-easing

      &:focus,
      &:active
        outline: none

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