Text area

                @use "../abstracts/css-util";

.text-area {
    min-height: 10rem;
    resize: vertical;
    font-family: css-util.get-var(text-field,font);
    font-size: css-util.get-var(text-field,text-size);
    font-weight: css-util.get-var(text-field,text-weight);
    color: css-util.get-var(text-field,text-color);
    width: css-util.get-var(text-field,width);
    padding: css-util.get-var(text-field,padding);
    background: css-util.get-var(text-field,background);
    border-radius: css-util.get-var(text-field,radius);
    border: css-util.get-var(text-field,border-width) solid css-util.get-var(text-field,border-color);

    &:hover {
        border: css-util.get-var(text-field,border-width) solid css-util.get-var(text-field,hover,border-color);
    }

    &:focus-visible {
        border: css-util.get-var(text-field,border-width) solid css-util.get-var(text-field,focus,border-color);
    }

    &:disabled {
        border: css-util.get-var(text-field,border-width) solid css-util.get-var(text-field,disabled,border-color);
        background: css-util.get-var(text-field,disabled,background);
        color: css-util.get-var(text-field,disabled,text-color);
        -webkit-text-fill-color: css-util.get-var(text-field,disabled,text-color);
        opacity: 1; /* required on iOS */
    }
}