// Defines the width of the textarea when the w-* class is not present.
$slab-textarea-default-width: 100% !default;


.slab-textarea {
  display: block;
  min-height: $slab-textarea-min-height;
  border-radius: $border-radius;
  border: 1px solid var(--slab_component_border_color);

  &:not([class*="w-"]) {
    width: $slab-textarea-default-width;
  }

  &.slab-textarea-no-resize {
    resize: none;
  }

  &.slab-textarea-vertical-resize {
    resize: vertical;
  }

  &.slab-textarea-horizontal-resize {
    resize: horizontal;
  }

  &:disabled {
    cursor: not-allowed;
    background-color: #f4f5f7 !important;
    color: #b6babe;
  }

  &:focus {
    border-color: $slab-focus-component-border-color;
    outline: 0;
    box-shadow: $slab-focus-component-shadow;
  }
}