@import '../../styles/styles.sass'

+theme(v-textarea) using ($material)
  &.v-text-field--solo-inverted.v-text-field--solo
    &.v-input--is-focused
      textarea
        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')

.v-textarea
  textarea
    flex: 1 1 auto
    line-height: 18px
    max-width: 100%
    min-height: 32px
    outline: none
    padding: 7px 0 8px
    width: 100%

  .v-text-field__prefix
    padding-top: 4px
    align-self: start

  &.v-text-field--box,
  &.v-text-field--enclosed
    .v-text-field__prefix,
    textarea
      margin-top: 24px

    &.v-text-field--single-line,
    &.v-text-field--outlined
      .v-text-field__prefix,
      textarea
        margin-top: 12px

      .v-label
        top: 18px

  &.v-text-field--solo
    align-items: flex-start

    // Essentially revert styles
    // applied by v-text-field
    .v-input__prepend-inner,
    .v-input__prepend-outer,
    .v-input__append-inner,
    .v-input__append-outer
      align-self: flex-start
      margin-top: 16px

  &--auto-grow
    textarea
      overflow: hidden

  &--no-resize
    textarea
      resize: none

  &.v-text-field--enclosed
    .v-text-field__slot
      margin-right: -12px

      textarea
        padding-right: 12px

  +rtl()
    &.v-text-field--enclosed
      .v-text-field__slot
        margin-right: 0
        margin-left: -12px

        textarea
          padding-right: 0
          padding-left: 12px