/* ==================================
   #TEXTAREA
   ================================== */

/* Variables
   ========================================================================== */

$au-textarea-height: $au-unit-large - $au-unit-small !default;
$au-textarea-color: var(--au-gray-1000) !default;
$au-textarea-border-color: var(--au-gray-300) !default;
$au-textarea-font-size: var(--au-h6) !default;
$au-textarea-border-radius: var(--au-radius) !default;
$au-textarea-disabled-background-color: var(--au-gray-100) !default;
$au-textarea-disabled-border-color: var(--au-gray-300) !default;
$au-textarea-disabled-color: var(--au-gray-700) !default;

/* Component
  ========================================================================== */

.au-c-textarea {
  border: 0.1rem solid $au-textarea-border-color;
  color: $au-textarea-color;
  font-family: var(--au-font);
  max-width: 100%;
  padding: $au-unit-tiny $au-unit-small;
  font-size: $au-textarea-font-size;
  font-weight: var(--au-regular);
  border-radius: $au-textarea-border-radius;

  &.is-disabled {
    background-color: $au-textarea-disabled-background-color;
    border-color: $au-textarea-disabled-border-color;
    color: $au-textarea-disabled-color;
    cursor: not-allowed;
  }
}

.au-c-textarea:focus {
  outline: none;
  border-color: var(--au-outline-color);
  box-shadow: inset 0 0 0 0.2rem var(--au-outline-color);
}

/* Modifiers
  ========================================================================== */

.au-c-textarea--block {
  display: block;
  width: 100%;
}

.au-c-textarea--error {
  border: 0.3rem solid var(--au-red-600);
}

.au-c-textarea--warning {
  border: 0.3rem solid var(--au-orange-500);
}

.au-c-textarea--disabled,
.au-c-textarea[disabled="true"] {
  background-color: $au-textarea-disabled-background-color;
  border-color: $au-textarea-disabled-border-color;
  color: $au-textarea-disabled-color;
  cursor: not-allowed;
}