.textArea {
    composes: reset from './../reset.css';
    width: 100%;
    height: 40px;
    padding: 10px 14px;
    border: 0;
    border-radius: 2px;
    background: var(--colors-ContrastNeutral);
    resize: vertical;
    transition: .3s height;

    &:focus {
        outline: 0;
        background: var(--colors-ContrastBrightest);
        color: var(--colors-ContrastDarkest);
    }
}
.textArea::-webkit-input-placeholder {
    font-family: 'Noto Sans', sans-serif;
    color: var(--colors-ContrastBright);
}
.textArea--invalid {
    outline: 2px solid var(--colors-Error) !important;
}
.textArea--highlight {
    outline: 2px solid var(--colors-Success);
}
.textArea--disabled {
    opacity: .65;
    cursor: not-allowed;
}
