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

.ui.input {
    color: color(color);
    display: inline-block;
    font-size: em(16px);
    position: relative;
    .label {
        &.label-bottom { margin-top: em(8px); }
        &.label-top { margin-bottom: em(8px); }
    }
        .input-required-indicator {
            color: color(colorAlert);
            display: inline-block;
            font-size: rem(14px);
            margin-left: 3px;
        }
    input {
        -webkit-appearance: none;
        background-color: color(backgroundColor);
        border-radius: 3px;
        border: 1px solid color(borderColor);
        line-height: em(42px);
        margin: 0;
        outline: none;
        padding: 0 em(11px);
        text-align: left;
        transition: border-color 150ms ease-out;
        width: 100%;
        &::placeholder { color: color(colorStatic); }
    }
    &.input-disabled {
        input {
            background-color: color(backgroundColorDisable);
            color: color(color);
        }
        &.input-icon { color: color(colorStatic); }
    }
    &.input-error {
        input { border-color: color(backgroundColorAlert) !important; }
        .input-error-message { color: color(colorAlert); font-size: em(14px); }
    }
    &.input-fluid { display: block; }
    .input-actions {
        height: 44px;
        left: 0;
        position: absolute;
        width: 100%;
    }
    &.input-icon, &.input-loading {
        .input-actions {
            > .ui.icon, > .input-icon-custom {
                margin-top: -8px;
                position: absolute;
                right: 11px;
                top: 50%;
            }
        }
        input { padding-right: em(38px); }
    }
    &.input-focused input { border-color: color(backgroundColorHighlight); }
    &.input-type-number {
        input {
            -moz-appearance: textfield;
            &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
        .input-number-controls {
            margin-top: -13px;
            position: absolute;
            right: 11px;
            top: 50%;
            button {
                background-color: transparent;
                border: 0;
                display: block;
                padding: 0;
                outline: none;
                &:last-child { margin-top: 2px; }
            }
            svg {
                display: block;
            }
        }
    }
    + * { margin-top: em(33px); }
}