/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Initialize textarea
 */
.slds-textarea {
  min-height: var(--slds-c-textarea-sizing-min-height);
  width: 100%;
  padding-block-start: var(--slds-c-textarea-spacing-block-start, var(--slds-g-spacing-2));
  padding-inline-end: var(--slds-c-textarea-spacing-inline-end, var(--slds-g-spacing-3));
  padding-block-end: var(--slds-c-textarea-spacing-block-end, var(--slds-g-spacing-2));
  padding-inline-start: var(--slds-c-textarea-spacing-inline-start, var(--slds-g-spacing-3));
  background-color: var(--slds-c-textarea-color-background, var(--slds-g-color-surface-container-1));
  color: var(--slds-c-textarea-text-color, var(--slds-s-input-color, var(--slds-g-color-on-surface-3)));
  border: 1px solid var(--slds-c-textarea-color-border, var(--slds-s-input-color-border));
  border-radius: var(--slds-c-textarea-radius-border, var(--slds-s-input-radius-border));
  box-shadow: var(--slds-c-textarea-shadow, var(--slds-s-input-shadow));
  font: inherit;
  resize: vertical;
  transition: background-color 0.1s linear;

  @media (pointer: coarse) and (hover: none) {
    font-size: var(--slds-g-font-scale-2);
  }

  &:required {
    --slds-c-textarea-shadow: none;
  }

  &:focus,
  &:active {
    outline: 0;
    --slds-c-textarea-color-border: var(--slds-s-input-color-border-focus);
    --slds-c-textarea-text-color: var(--slds-c-textarea-text-color-focus, revert);

    background-color: var(--slds-c-textarea-color-background-focus, var(--slds-g-color-surface-container-1));
  }

  &:focus-visible {
    --slds-c-textarea-shadow: var(--slds-c-textarea-shadow-focus, var(--slds-g-shadow-inset-focus-1));

    border-color: transparent;
    background-clip: padding-box;
    outline: 0;
  }

  &:focus:invalid {
    background-color: var(--slds-s-input-color-background-invalid);
    color: var(--slds-s-input-color-invalid);
  }

  /* Skip readonly visual treatment when also disabled — disabled wins */
  &[readonly]:not([disabled]) {
    border: 0;
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    border-radius: 0;
    resize: none;
  }

  &[disabled],
  &.slds-is-disabled {
    background-color: var(--slds-s-input-color-background-disabled, var(--slds-g-color-disabled-container-1));
    border-color: var(--slds-s-input-color-border-disabled, var(--slds-g-color-border-disabled-1));
    color: var(--slds-s-input-color-disabled, var(--slds-g-color-on-disabled-2));
    cursor: not-allowed;
    user-select: none;

    &:focus,
    &:active {
      box-shadow: none;
    }
  }
}

.slds-has-error .slds-textarea {
  --slds-c-textarea-color-border: var(--slds-g-color-border-error-1);
  --slds-c-textarea-color-background: var(--slds-s-input-color-background-invalid);

  background-clip: padding-box;

  &:focus,
  &:active {
    --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);

    --slds-c-textarea-color-background-focus: var(
      --slds-c-textarea-color-background-error-focus,
      var(--slds-g-color-surface-container-1)
    );
  }
}