@import '../../less/palette';
@import '../../less/fonts';
@import '../../less/palette-brand-@{theme}';
@import '../../less/styles';

.text-area {
    position: relative;
    box-sizing: border-box;

    ::placeholder {
        color: @color-hint;
    }

    >div {
        position: relative;
    }

    label {
        .uppercase;
        margin-bottom: 8px;
        font-size: 11px;
        font-weight: bold;
        display: block;
    }

    textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 104px;

        padding: 8px 12px;
        line-height: 22px;
        border-radius: 3px;
        border: 1px solid @color-border;
        box-shadow: none;
        font-family: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        background-color: #fff;
        color: @color-primary;
        outline: 0 transparent;
        resize: none;

        &:focus {
            border-color: @color-brand;
        }

        &:focus {
            &~.error-tooltip {
                display: block;
            }
        }

        &:disabled {
            cursor: not-allowed;
            background-color: @color-off-white;
            color: @color-hint;
        }
    }

    .error-tooltip {
        display: none;

        .error-tooltip-mixin();
    }

    &.has-error {
        ::placeholder {
            color: @color-error-input-placeholder;
        }

        &.disabled {
            ::placeholder {
                color: @color-error-disabled;
            }
        }

        textarea {
            color: @color-error;
            border: 1px solid @color-error;
            background-color: @color-error-input-bg;

            &:disabled {
                border-color: @color-error-disabled;
                background-color: @color-error-disabled-bg;
            }
        }
    }
}
