@charset "utf-8";
@import (optional, reference) "var.less";
/*Textarea input*/
AX-TEXTAREA {
    --_cmpt-p: var(--_sz-em-space);
    --_cmpt-fs: var(--_sz-font);
    --_cmpt-r: var(--_r);
    --_cmpt-w: var(--_w-input);
    --_cmpt-os: var(--_sz-em-space);
    display: inline-flex;
    flex-direction: column;
    width: var(--_w-input);
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    [role=wrap] {
        color: var(--_c-ignore);
        background-color: #fff;
        border-radius: var(--_cmpt-r);
        border: 1px solid var(--_c-text-bd);
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        position: relative;
        .v3-trans-all();
        &:focus-within {
            color: var(--_c-prim);
            border-color: var(--_c-prim);
            .v3-outline(var(--_c-prim-sd));
        }
    }
    [role=limit] {
        font-size: var(--_fs-min);
        color: var(--_c-ignore);
        line-height: 1.5em;
        padding: calc(1em / 3) 0;
    }
    &[exceeded] [role=limit]{
        color: var(--_c-error);
    }
    textarea {
        --_input-p: var(--_cmpt-p);
        --_input-fs: var(--_cmpt-fs);
        --_input-os: var(--_cmpt-os);
        width: 100%;
        min-width: auto;
        border-width: 0;
        outline: none;
        box-shadow: none;
        flex: auto;
    }
    &:has([role=tools]) textarea {
        padding-right: var(--_sz-list);
    }
    [role=tools] {
        --_tools-fs: var(--_sz-ignore);
        color: var(--_c-ignore);
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
    }
    &[enough] {
        [role=tools] {
            right: var(--_sz-space);
        }
    }
    &:hover {
        border-color: var(--_c-prim);
    }
    &[size=sm] {
        --_input-h: var(--_sz-em-body);
    }
    &[size=lg] {
        --_input-h: var(--_sz-em-large);
        --_input-p-lr: var(--_sz-em-font);
    }
}
