/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

//
// FORM > TEXTAREA
//


// "BASE" CONTROL

.hds-form-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: var(--token-form-control-padding);
    color: var(--token-form-control-base-foreground-value-color);
    background-color: var(--token-form-control-base-surface-color-default);
    border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
    border-radius: var(--token-form-control-border-radius);
    box-shadow: var(--token-elevation-inset-box-shadow);
    resize: vertical;
  
    // PLACEHOLDER
  
    ::placeholder {
      color: var(--token-form-control-base-foreground-placeholder-color);
    }
  
    // STATUS
  
    &:hover,
    &.mock-hover {
      border-color: var(--token-form-control-base-border-color-hover);
    }
  
    // focus (same for all the states)
  
    &:focus,
    &.mock-focus {
      border-color: var(--token-color-focus-action-internal);
      // Notice: Safari doesn't apply a rounded border
      outline: 3px solid var(--token-color-focus-action-external);
      outline-offset: 0;
    }
  
    // READONLY
  
    &:read-only {
      color: var(--token-form-control-readonly-foreground-color);
      background-color: var(--token-form-control-readonly-surface-color);
      border-color: var(--token-form-control-readonly-border-color);
      box-shadow: none;
    }
  
    // DISABLED
  
    &:disabled {
      color: var(--token-form-control-disabled-foreground-color);
      background-color: var(--token-form-control-disabled-surface-color);
      border-color: var(--token-form-control-disabled-border-color);
      box-shadow: none;
      cursor: not-allowed;
    }
  
    // INVALID
  
    &.hds-form-textarea--is-invalid {
      border-color: var(--token-form-control-invalid-border-color-default);
  
      &:hover,
      &.mock-hover {
        border-color: var(--token-form-control-invalid-border-color-hover);
      }
  
      &:focus,
      &.mock-focus {
        border-color: var(--token-color-focus-critical-internal);
        outline-color: var(--token-color-focus-critical-external);
      }
    }
  }