forms.less

form {
    margin: 0 0 14pt;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: @baseLineHeight;
    font-size: @baseFontSize * 1.5;
    line-height: @baseLineHeight * 2;
    color: @grayDark;
    border: 0;
    border-bottom: 1px solid #e5e5e5;

    // Small
    small {
        font-size: @baseLineHeight * .75;
        color: @grayLight;
    }
}

label {
    display: block;
    margin: 5px 0;
}

.input-control {
    //display: block;
    //margin-bottom: @baseLineHeight / 2;
}

.input-control {
    &.checkbox, &.radio, &.switch, &.text, &.password, &.select, &.textarea {
        display: inline-block;
        cursor: pointer;
        position: relative;
        margin-bottom: 7pt;
    }
}

.input-control {
    &.checkbox, &.radio {
        input[type="checkbox"], input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
        }


        input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
            outline: 1px @grayLight dotted !important;
        }

        .caption {
            margin: 0 5px;
        }

        .check {
            .square(20px);
            background-color: @white;
            border: 2px @inputRestState solid;
            padding: 0;
            margin: 0 5px 0 0;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        &.text-left {
            .check {
                margin: 0 0 0 5px;
            }
        }

        &:hover {
            .check {
                border-color: @inputHoverState;
            }
        }

        .check:active {
            border-color: @inputActiveState;
        }
        .check:focus {
            border-color: @inputFocusState;
        }

        .check:after {
            position: absolute;
            font-family: iconFont;
            font-size: 9pt;
            line-height: 9pt;
        }

        input[type="checkbox"]:checked ~ .check:after, input[type="radio"]:checked ~ .check:after {
            content: "\e08a";
            margin: 2px;
            top: 0;
            color: @dark;
        }

        input[type="checkbox"]:disabled ~ .check, input[type="radio"]:disabled ~ .check  {
            border-color: @inputRestState;
            background-color: @inputDisabledBgState;

            &:after {
                color: @inputDisabledState;
            }
        }

        input[data-show="intermediate"] ~ .check, input[data-show="intermediate"]:checked ~ .check  {
            &:after {
                display: block;
                content: "" !important;
                .square(10px);
                background-color: @dark;
                margin: 3px;
            }
        }

        input[data-show="intermediate"]:disabled ~ .check {
            &:after {
                background-color: @inputDisabledState;
            }
        }
    }

    &.radio {
        .check {
            border-radius: 50%;
        }
        &.default-style {
            input[type="radio"]:checked ~ .check:after {
                display: block;
                content: "" !important;
                .square(10px);
                border-radius: 50%;
                background-color: @dark;
                margin: 3px;
            }

            input[type="radio"]:checked:disabled ~ .check:after {
                background-color: @inputDisabledState;
            }
        }
    }
}

.input-control {
    &.switch {
        input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
        }

        .caption {
            margin: 0 5px;
        }

        .check {
            background-color: transparent;
            position: relative;
            .size(18px, 45px);
            outline: 2px #a6a6a6 solid;
            border: 1px #fff solid;
            cursor: pointer;
            background: #A6A6A6;
            z-index: 1;
            display: inline-block;
            vertical-align: middle;
        }

        .check:after {
            position: absolute;
            left: -1px;
            top: -1px;
            display: block;
            content: "";
            .size(16px, 9px);
            outline: 2px #333 solid;
            border: 1px #333 solid;
            cursor: pointer;
            background: #333;
            z-index: 2;
            //transition: left 0.3s ease, right 0.3s ease;
        }

        input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
            outline: 1px @grayLight dotted !important;
        }

        input[type="checkbox"]:checked ~ .check {
            background: #008287;
            &:after {
                left: auto;
                right: -1px;
            }
        }

        input[type="checkbox"]:disabled ~ .check {
            background-color: @inputDisabledBgState;
            border-color: @white;
            &:after {
                background-color: @inputDisabledState;
                outline-color: @inputDisabledState;
                border-color: @inputDisabledState;
            }
        }
    }
}

.input-control {
    &.text, &.password, &.file {
        display: inline-block;
        cursor: pointer;
        position: relative;
        background-color: #fff;
        outline: 0;
        height: 34px;
        position: relative;
        width: 100%;

        .btn-clear, .btn-reveal, .btn-date, .btn-file, .btn-search {
            background-color: #F0F0F0;
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 2;
            border: 0;
            right: 4px;
            .square(24px);
            min-height: 1px;
            min-width: 1px;
            padding: 0;
            margin: 0;
            display: none;
            &:after {
                font-family: iconFont;
                font-size: 10pt;
            }
            &:not(:disabled):active {
                background-color: @dark;
                color: @white;
            }
            &:active {
                left: auto;
            }

            &:focus {
                outline: 1px #ccc dotted ;
            }
        }

        input:focus ~ .btn-clear, input:focus ~ .btn-reveal {
            display: block;
        }

        input:not(:focus) ~ .btn-clear:active, input:not(:focus) ~ .btn-reveal:active {
            display: block;
        }

        .btn-clear:after {content: "\e089";}
        .btn-reveal:after {content: "\e000";}
        .btn-search:after {content: "\e041";}
        .btn-date:after {content: "\e020";}
        .btn-file:after {content: "\e012";}
        .btn-search {display: block;}
        .btn-date {display: block;}
        .btn-file {display: block;}

        [class*="btn-"] {
            background-color: transparent;
        }

        input::-ms-reveal, input::-ms-clear {
            display: none;
        }

        input {
            border: 1px @inputRestState solid;
            width: 100%;
            height: 100%;
            padding: 5px;
            z-index: 1;
            //padding-right: 30px;
            &:focus {
                outline: 0;
                border-color: @inputFocusState;
            }
            &:disabled {
                padding-right: 5px;
            }
        }

        input:disabled ~ .btn-clear, input:disabled ~ .btn-reveal {
            display: none;
        }

        input::-moz-placeholder {color: @placeHolderText;}
        input::-webkit-input-placeholder {color: @placeHolderText;}
    }
}

.input-control {
    &.select, &.textarea {
        display: inline-block;
        cursor: pointer;
        position: relative;
        width: 100%;
        select, textarea {
            border: 1px @inputRestState solid;
            width: 100%;
            padding: 5px;
            &:focus {
                outline: 0;
                border-color: @inputFocusState;
            }
            &:disabled {
                padding-right: 5px;
            }
        }

        textarea {
            min-height: 100px;
        }
    }
}

.input-control {
    &.text, &.password, &.select, &.textarea, &.file {
        &.warning-state {
            input, select, textarea {
                border-color: @orange;
            }
        }
        &.error-state {
            input, select, textarea {
                border-color: @red;
            }
        }
        &.info-state {
            input, select, textarea {
                border-color: @lightBlue;
            }
        }
        &.success-state {
            input, select, textarea {
                border-color: @green;
            }
        }

        input[data-state="warning"] {
            border-color: @orange;
        }
        input[data-state="error"] {
            border-color: @red;
        }
        input[data-state="info"] {
            border-color: @lightBlue;
        }
        input[data-state="success"] {
            border-color: @green;
        }
    }
}

.input-control {
    &.text, &.password {
        //input:invalid  {border-color: @red;}
    }
}

.input-control {
    &.text, &.password, &.select, &.textarea, &.file {
        &[class*="span"] {
            margin-left: 0;
        }
        &.block {
        }
    }
}

.input-control {
    &.file {
        overflow: hidden;
        input[type="file"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
            bottom: 0;
            right: 0;
        }
    }
}

input[type="button"], input[type="submit"], input[type="reset"] {
    .button;
}