[data-role="textarea"] { 
    width:100%; 
    position:relative; 
    background-color:transparent !important; 
    border-width:0px; 
}

[data-role="textarea"] > label { 
    width:100%; 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
[data-role="textarea"] > .description:not(:empty) { 
    padding-top:0.5em; 
    padding-bottom:0.5em; 
}


[data-role="textarea"] > div { 
    position:relative; 
    display:grid !important; 
    width:fit-content;
    border:none;
}

[data-role="textarea"] > div > .textarea-display,
[data-role="textarea"] > div > .textarea-input {
    display: block;
    white-space: pre-wrap !important;
    font-family: monospace !important;
    /* font-family: 'Work Sans', sans-serif; */
    font-size: 1em;
    padding:0.5em;
    line-height:1.2em;
    grid-area: 1 / 1 / 2 / 2;
    overflow-x:auto;
    overflow-y:auto;
}

[data-role="textarea"] > div > .textarea-display * { 
    display:inline-block !important; 
    font-family: inherit !important;
    font-size: inherit !important;
    line-height:inherit !important;
    padding:none !important;
    margin:none !important;
    white-space:pre-wrap !important;
    border:none !important;
}

[data-role="textarea"] > div > .textarea-input {
    position:relative;
    color:transparent;
    background:transparent;
    resize: vertical;
    caret-color:var(--cavelo-black);
}

[data-role="textarea"] > div > .textarea-display {
    position:absolute;
    background:transparent;
    border:1px solid transparent;
    height:100%; width:100%;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

[data-role="textarea"] > div > .textarea-display::-webkit-scrollbar { 
    opacity:0; 
}


[data-role="textarea"] > div > .textarea-display > .form-error { background-color:var(--cavelo-orange) !important; }


textarea[readonly="true"] {
    color:var(--cavelo-black-80) !important;
    background-color:var(--bg-readonly) !important;
    border-color:var(--cavelo-grey) !important;
    border-top-width:0;
    border-right-width:0;
    border-left-width:0;
    outline:none !important;
    cursor: default !important;
}

textarea.text-small { 
    font-size:0.8rem;
}


[data-role="textarea"].simple > div > .textarea-display { display:none !important }
[data-role="textarea"].simple > div > .textarea-input { color:var(--cavelo-black) !important }