@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

.ui.text-area {
    align-items: flex-start;
    color: color(color);
    display: inline-flex;
    flex-direction: column;
    font-size: em(16px);
    justify-content: flex-start;
    .label { margin-bottom: em(6px); }
        .text-area-required-indicator {
            color: color(colorAlert);
            display: inline-block;
            font-size: rem(14px);
            margin-left: 3px;
        }
    .text-area-container { position: relative; }
        textarea {
            -webkit-appearance: none;
            background-color: color(backgroundColor);
            border-radius: 3px;
            border: 1px solid color(borderColor);
            display: block;
            margin: 0;
            outline: none;
            padding: em(10px);
            text-align: left;
            transition: border-color 150ms ease-out;
            width: 100%;
            &::placeholder { color: color(colorStatic); }
        }
    &.text-area-disabled textarea { background-color: color(backgroundColorDisable); }
    &.text-area-error {
        textarea { border-color: color(backgroundColorAlert) !important; }
        .text-area-error-message { color: color(colorAlert); font-size: em(14px); }
    }
    &.text-area-fluid { display: block; }
    &.text-area-focused textarea { border-color: color(backgroundColorHighlight); }
    + * { margin-top: em(33px); }
}