/**
 * textarea.css — Textarea (.ui-textarea)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, fields.css
 * @uses       field-sizing: content — auto-grow with text (modern browsers;
 *             falls back to fixed min/max block-size where unsupported)
 * @tokens     --ui-textarea-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-textarea-inline-size: 100%;
    --ui-textarea-min-inline-size: 0;
    --ui-textarea-min-block-size: 5lh;
    --ui-textarea-max-block-size: 12lh;
    --ui-textarea-padding: var(--ui-field-padding);
    --ui-textarea-font-size: var(--ui-field-font-size);
    --ui-textarea-line-height: var(--leading-sm);
    --ui-textarea-border-width: var(--ui-field-border-width);
    --ui-textarea-border-style: var(--ui-field-border-style);
    --ui-textarea-border-color: var(--ui-field-border-color);
    --ui-textarea-radius: var(--ui-field-radius);
    --ui-textarea-resize: vertical;
  }
}

@layer zazz.components {
  /* ===========================================================================
  TEXTAREA — .ui-textarea (auto-sizing)
  - field-sizing: content grows the box with the text; height clamps between
    min/max block-size, then scrolls.
  - Shares the --ui-field-* tokens defined in fields.css so it matches .ui-input /
    .ui-select / .ui-button.
  =========================================================================== */

  .ui-textarea {
    field-sizing: content;
    inline-size: var(--ui-textarea-inline-size);
    min-inline-size: var(--ui-textarea-min-inline-size);
    min-block-size: var(--ui-textarea-min-block-size);
    max-block-size: var(--ui-textarea-max-block-size);
    padding: var(--ui-textarea-padding);

    font-size: var(--ui-textarea-font-size);
    line-height: var(--ui-textarea-line-height);
    color: var(--ui-field-foreground);
    background-color: var(--ui-field-background);

    border: var(--ui-textarea-border-width) var(--ui-textarea-border-style)
      var(--ui-textarea-border-color);
    border-radius: var(--ui-textarea-radius);
    resize: var(--ui-textarea-resize);

    /* ring renders as box-shadow; transparent outline twin keeps focus visible
       in forced-colors / high-contrast modes */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-field-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring));
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

    transition: var(--default-transition);
  }

  .ui-textarea:hover {
    border-color: var(--ui-field-border-color--hover);
    background-color: var(--ui-field-background--hover);
  }

  .ui-textarea:focus-visible {
    background-color: var(--ui-field-background--focus);
    border-color: var(--ui-field-border-color--focus);
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);
    outline-color: transparent;
  }
}