$textarea-padding: v("control-padding-horizontal") !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default

+register(textarea-padding,$textarea-padding, true)
+register(textarea-max-height,$textarea-max-height, true)
+register(textarea-min-height,$textarea-min-height, true)

%input-textarea
  @extend %input
  box-shadow: v("input-shadow")
  max-width: 100%
  width: 100%
  &[readonly]
    box-shadow: none
  // Colors
  @each $name in $colors-list
    &.is-#{$name}
      border-color: v($name)
      &:focus,
      &.is-focused,
      &:active,
      &.is-active
        box-shadow: v("input-focus-box-shadow-size") vAlphaChange($name, 0.25)
  // Sizes
  &.is-small
    +control-small
  &.is-medium
    +control-medium
  &.is-large
    +control-large
  // Modifiers
  &.is-fullwidth
    display: block
    width: 100%
  &.is-inline
    display: inline
    width: auto

.input
  @extend %input-textarea
  &.is-rounded
    border-radius: v("radius-rounded")
    padding-left: calc(#{v("control-padding-horizontal")} + 0.375em)
    padding-right: calc(#{v("control-padding-horizontal")} + 0.375em)
  &.is-static
    background-color: transparent
    border-color: transparent
    box-shadow: none
    padding-left: 0
    padding-right: 0

.textarea
  @extend %input-textarea
  display: block
  max-width: 100%
  min-width: 100%
  padding: v("textarea-padding")
  resize: vertical
  &:not([rows])
    max-height: v("textarea-max-height")
    min-height: v("textarea-min-height")
  &[rows]
    height: initial
  // Modifiers
  &.has-fixed-size
    resize: none