/*
 * <x-textarea>: the text field grown to several lines (resources/views/components/textarea.blade.php).
 *
 * The chrome is the field's (components/field.css); this file is what a <textarea> changes in it.
 * The browser's resize grip belongs in the field's corner, so the textarea reaches to just inside
 * the outline's end and bottom and its padding puts the text back. Its label rests on the first
 * line rather than in the middle of the box. With `data-md-autogrow` it grows with its text from
 * `--field-rows` lines to `--field-max-rows` (both set inline by the view) through
 * `field-sizing: content`, and resources/js/field.js sets the height where the browser cannot.
 * A line is body-large's 1.5rem, so the row arithmetic stays in rem with the text.
 *
 * The field's root carries `data-md-textarea`.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './field.css';

@layer material.components {
    /* The browser draws the resize grip in the textarea's own corner, so the
       textarea reaches to just inside the outline's end and bottom — the grip sits
       in the field's corner, not on the bottom outline a padding in from it — and
       its padding puts the text back where it was. */
    textarea[data-md-field-control] {
        --field-grip: var(--md-sys-measurement-space50);

        /* The first half-line of the top offset is a margin, not padding: text scrolled up in a full
           textarea disappears under the edge instead of running through the label. */
        --textarea-clear: var(--md-sys-measurement-space100);
        --textarea-pad-top: calc((var(--field-height) - 1.5rem) / 2 - var(--textarea-clear));
        --textarea-pad-bottom: calc((var(--field-height) - 1.5rem) / 2 - var(--field-grip));

        margin-block: var(--textarea-clear) var(--field-grip);
        margin-inline-end: calc(var(--field-grip) - var(--field-pad));
        padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
        padding-inline-end: calc(var(--field-pad) - var(--field-grip));
        resize: vertical;
    }

    /* `<x-textarea>` grows with what is typed, from `rows` lines up to `max-rows`. Where the browser
       cannot size a field to its content, resources/js/field.js sets the height instead. */
    textarea[data-md-field-control][data-md-autogrow] {
        field-sizing: content;
        min-block-size: calc(var(--field-rows, 3) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
        max-block-size: calc(var(--field-max-rows, 1000) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
        resize: none;
    }

    /* A textarea's label rests on its first line, not in the middle of the box. */
    [data-md-field]:not([data-md-floated]):has([data-md-field-label]):has(textarea[data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] {
        top: calc(var(--field-height) / 2);
    }

    /* Filled, the label floats inside the box: the text starts under it, 24px down, and the
       bottom keeps the field's 8px. */
    [data-md-field][data-md-variant='filled']:has([data-md-field-label]) textarea[data-md-field-control] {
        --textarea-clear: var(--md-sys-measurement-space300);
        --textarea-pad-top: 0px;
        --textarea-pad-bottom: calc(var(--md-sys-measurement-space100) - var(--field-grip));

        padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
    }
}