%input-textarea
  @extend %input
  max-width: 100%
  width: 100%
  &[readonly]
    box-shadow: none
  // Modifiers
  &.is-fullwidth
    display: block
    width: 100%
  &.is-inline
    display: inline
    width: auto

.input
  @extend %input-textarea

.textarea
  @extend %input-textarea
  display: block
  max-width: 100%
  min-width: 100%
  resize: vertical
  padding: calc(0.75em - 2px)
  &:not([rows])
    max-height: 40em
    min-height: 8em
  &[rows]
    height: initial
  // Modifiers
  &.has-fixed-size
    resize: none

input.input,
textarea.textarea
  border-width: 2px
  border-radius: var(--group-form-field-control-radius)
  font-size: var(--group-form-field-control-font-size)
  font-family: var(--group-form-field-control-font-family)
  color: var(--group-form-field-control-color)
  outline: none
  box-shadow: none
  &.is-danger
    border-color: var(--group-form-field-control-danger-border-color)
    background: var(--group-form-field-control-danger-background)
    &.group-focused,
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      border-color: var(--group-form-field-control-border-color-active)
  &.is-success
    border-color: var(--group-form-field-control-success-border-color)
    background: var(--group-form-field-control-success-background)
    &.group-focused,
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      border-color: var(--group-form-field-control-border-color-active)
  // deprecated
  &.is-warning
    border-color: var(--group-color-border-warning)
    background: var(--group-color-warning-1)
    &.group-focused,
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      border-color: var(--group-form-field-control-border-color-active)
  &.is-disabled
    color: var(--group-form-field-control-disabled-color)
    border-color: var(--group-form-field-control-disabled-border-color)
    background: var(--group-form-field-control-disabled-background)

// overrides style for inputs in a group input
input.is-grouped
  background: none !important
  border: none !important
  box-shadow: none !important