//
// Checkbox, Radio button
//

//
// Checkbox
//
input[type=checkbox] {
    .check-box-color-set();

    height: 0;
    opacity: 0;
    position: absolute;
    flex: none;
    width: 0;

    & + label {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        line-height: 1;
        vertical-align: top;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        outline: none;

        &:before {
            content: "\e92e";
            color: @label-before-color;
            font-family: 'iguazio';
            padding: 0;
            height: 16px;
            width: 16px;
            font-size: 16px;
            margin-right: 9px;
        }

        &.empty {
            width: 0;
            padding: 0;
            margin: 0;
        }
    }

    // Disabled
    &:disabled + label {
        cursor: not-allowed;
        opacity: .6;

        &:before {
            content: "\e92e";
            color: @label-before-in-disabled-color;
        }
    }

    // Checked - enabled
    &:checked + label:before {
        content: "\e92f";
        color: @label-before-in-checked-color;
    }

    // Checked - disabled
    &:checked:disabled + label:before {
        content: "\e92f";
        color: @label-before-in-checked-disabled-color;
    }
}

//
// Radio button
//
input[type=radio] {
    .radio-button-color-set();

    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
    outline: none;

    &:checked {
        & + label {
            &:before {
                font-family: 'iguazio';
                content: "\e934";
                color: @label-before-in-checked-color;
                font-size: 18px;
            }
        }
    }

    & + label {
        cursor: pointer;
        display: block;
        font-weight: normal;
        margin: 0;
        padding-left: 25px;
        position: relative;
        text-align: left;
        outline: none;

        &:before {
            font-family: 'iguazio';
            content: "\e933";
            display: inline-block;
            left: 0;
            margin: 0;
            padding: 0;
            position: absolute;
            color: @label-before-color;
            font-size: 16px;
        }

        &.empty {
            width: 0;
            padding: 0;
            margin: 0;
        }
    }
}

// Fix Bootstrap ui glitch at Firefox
input[type="radio"][disabled],
input[type="checkbox"][disabled] {
    display: none;
}

// Regular text-input
input.igz-text-input {
    .inputs-general-color-set();

    background-color: @text-input-bg-color;
    border: @text-input-border;
    border-radius: 2px;
    color: @text-input-color;
    display: block;
    position: relative;
    width: 100%;
    height: 36px;
    padding: 0 52px 1px 10px;
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
        background-color: @text-input-focus-invalid-bg-color;
        border: @text-input-focus-invalid-border;
        box-shadow: none;
        outline: none;
    }

    &:hover:not(:disabled), &:focus {
        outline: 0;
        border: @text-input-hover-focus-border;
    }

    &.invalid {
        background-color: @text-input-invalid-bg-color;
        border: @text-input-invalid-border;
        box-shadow: none;
    }

    &:focus.ng-valid, &:focus.ng-pristine {
        border: @text-input-focus-valid-border;
        box-shadow: none;
        outline: none;
    }
}

html input[disabled], html textarea[disabled] {
    .inputs-general-color-set();

    background-color: @input-disabled-bg-color;
    opacity: 0.5;
    cursor: not-allowed;
}

// Number + Measurement select combo input
.igz-combo-input-dropdown {
    .combo-input-dropdown-color-set();

    position: relative;
    height: 36px;
    display: flex;
    align-items: center;

    .igz-combo-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .igz-combo-dropdown {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 56px;

        .default-dropdown {
            height: 34px;

            .default-dropdown-field {
                border: 0;

                .dropdown-selected-item {
                    padding: 0 3px 0 5px;
                }
            }

        }
    }

    .combo-status-line {
        position: absolute;
        z-index: 5;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: @combo-status-line-bg-color;

        &.invalid {
            background-color: @combo-status-line-invalid-bg-color;
        }
    }
}

//
// Validation messages
//

.input-invalid {
    .inputs-general-color-set();

    border-color: @input-invalid-border-color;
}

.error-text {
    .inputs-general-color-set();

    color: @error-text-color;
    font-size: 12px;
    line-height: 1;
    margin-top: 2px;
    position: absolute;

    &.top-placed {
        top: -14px;
    }
}

.error-relative {
    position: relative;
}

.asterisks {
    .inputs-general-color-set();

    color: @asterisks-color;
    font-size: 16px;
    font-weight: 400;
    padding-left: 2px;
}

//
// rz slider
//

.rzslider:not([disabled]) {
    .rz-slider-color-set();

    .rz-bar {
        background-color: @rz-slider-bar-bg-color;

        &.rz-selection {
            background-color: @rz-slider-bar-selection-bg-color;
        }
    }

    .rz-pointer {
        background-color: @rz-slider-pointer-bg-color;
    }

    .rz-tick {
        background-color: @rz-slider-tick-bg-color;
    }
}