/*@example <textarea is="textarea" has="expandable-edit-view"></textarea>*/
@layer component {
    [is=textarea] {
        width: 100%;
        padding: var(--textarea-padding-block, var(--control-padding-block)) var(--textarea-padding-inline, var(--control-field-padding-inline));
        border: var(--textarea-border, var(--control-border));
        border-radius: var(--textarea-border-radius, var(--control-border-radius));
        background: var(--textarea-background, var(--control-background));
        font-family: inherit;
        color: var(--textarea-color, var(--control-color));

        &[has~=expandable-edit-view][now~=expanded] {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            height: 50vh;
            z-index: 2001;
        }
    }


}