@if $css-variable-enabled {
  $primary-transition: var(--primary-transition);
  $textarea-border-radius: var(--textarea-border-radius);
  $medium-text: var(--medium-text);
  $textarea-border-spread: var(--textarea-border-spread);
}

.#{$prefix}textarea {
  appearance: none;
  padding: 8px 10px;
  background-color: var(--textarea-bg-color);
  color: var(--textarea-text-color);
  border-width: 0;
  border-bottom-width: 2px;
  border-color: $transparent;
  transition-property: background-color, box-shadow, border-color;
  display: block;
  min-height: 4em;
  transition: all $primary-transition, width 0s, height 0s;
  border-radius: $textarea-border-radius;
  font-size: $medium-text;

  &:not([cols]) {
    min-width: 15em;
  }


  &:hover, &.#{$prefix}hovered {
    background-color: var(--textarea-hovered-bg-color);
  }

  &:focus, &.#{$prefix}focused {
    background-color: var(--body-bg-color);
    box-shadow: 0 0 0 $textarea-border-spread var(--textarea-border-spread-color);
  }

  &::placeholder {
    color: var(--textarea-placeholder-text-color);
  }

  &[disabled] {
    background-color: var(--item-disabled-bg-color);
    color: var(--item-disabled-fg-color);
    pointer-events: none;
    resize: none;

    &::placeholder {
      color: var(--item-disabled-fg-color);
    }
  }

  // Transparent
  &.#{$prefix}transparent {
    background-color: $transparent !important;

    &:focus, &.#{$prefix}focused {
      background-color: $transparent !important;
      box-shadow: 0 0 0 0 !important;
    }
  }

  // Readonly
  &.#{$prefix}readonly, &[readonly] {

    &:hover, &.#{$prefix}hovered {
      background-color: var(--textarea-bg-color);
    }

    &:focus, &.#{$prefix}focused {
      background-color: var(--textarea-bg-color);
      box-shadow: 0 0 0 1px var(--textarea-border-spread-color);
    }
  }

  @each $name, $color, $skip, $hovered-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        border-color: $color;

        &:focus, &.#{$prefix}focused {
          border-color: $transparent;
          box-shadow: 0 0 0 $textarea-border-spread $hovered-color;
        }

        &.#{$prefix}readonly, &[readonly] {
          &:focus, &.#{$prefix}focused {
            box-shadow: 0 0 0 1px $hovered-color;
          }
        }
      }
    }
  }

  &:not(:last-child) {
    margin-bottom: 8px;
  }

  &.#{$prefix}v-resize, &.#{$prefix}v-resizable {
    resize: vertical;
  }

  &.#{$prefix}h-resize, &.#{$prefix}h-resizable {
    resize: horizontal;
  }

  &.#{$prefix}unresizable {
    resize: none;
  }

  .#{$prefix}form-el & {
    max-width: calc(100% - 0.5px);
  }

  .#{$prefix}form-el.#{$prefix}fullwidth & {
    width: 100%;
    resize: vertical;
  }
}