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

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

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

    >div {
        position: relative;
    }

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

    input {
        width: 100%;
        box-sizing: border-box;
        outline: none;
        height: 40px;

        padding: 14px 12px 10px;
        border-radius: 3px;
        border: 1px solid @color-border;
        box-shadow: none;
        font-family: inherit;
        font-size: inherit;
        text-align: inherit;
        letter-spacing: inherit;
        color: @color-primary;

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

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

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

    // Used by the 'Show/Hide' toggle when format="password"
    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding-top: 4px;
        padding-bottom: 2px;

        right: 12px;
        border-width: 0;
        background-color: rgba(0, 0, 0, 0);
        color: @color-hint;
        cursor: pointer;
        font-family: inherit;
        font-size: 90%;

        &:focus,
        &:active {
            outline: 0;
        }
    }

    .error-tooltip {
        display: none;
        .error-tooltip-mixin();
    }

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

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

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

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

        button {
            color: @color-error-input-placeholder;
        }
    }
}
