
/*===============================================================*/
/* FORM-ELEMENTS STYLES */
/*===============================================================*/

form {

    margin: 0 0 60px 0;

    /* IMPORT OTHER FORMELEMENTS */
    /*---------------------------------------------------------------*/
    @import "../formelements/textinputs";
    @import "../formelements/labels";
    @import "../formelements/submitbutton";

    /* STYLES AND OVERRIDES FOR BOOTSTRAP CLASSES + VALIDATOR STYLES */
    /*---------------------------------------------------------------*/
    .form-group {
        margin-bottom: 20px;
        -webkit-transition: all .1s linear;
        -moz-transition: all .1s linear;
        -o-transition: all .1s linear;
        transition: all .1s linear;

        /* STYLES ".form-group" WHEN FOCUS INPUT - VALIDATOR */
        &.form-group-focus {
            background-color: $white03;
            /* IE8 hack - IE does not know about opacity */
            background-image: url("../../../images/bgFormElementsIE8.png")\9;
            padding: 10px;
        }

        /* STYLES FOR ERROR STATE - VALIDATOR */
        &.has-error {
            .form-control-feedback {
                color: $red !important;
            }
            .help-block {
                color: $red !important;
            }
            label {
                color: $red;
            }
            input[type="text"],
            input[type="password"],
            input[type="search"],
            input[type="number"],
            input[type="email"],
            input[type="tel"],
            input[type="time"],
            input[type="url"],
            textarea {
                color: $red;

                box-shadow: none;
                border-bottom: 1px solid $red;

                &:focus {
                    box-shadow: none;
                    border-color: $red;
                }
            }
        }

        /* STYLES FOR SUCCESS STATE - VALIDATOR */
        &.has-success {
            .form-control-feedback {
                color: $lightGreen !important;
            }

            .help-block {
                color: $lightGreen !important;
            }
            label {
                color: $white;
            }
            input[type="text"],
            input[type="password"],
            input[type="search"],
            input[type="number"],
            input[type="email"],
            input[type="tel"],
            input[type="time"],
            input[type="url"],
            textarea {
                color: $white;

                box-shadow: none;
                border-bottom: 1px solid $white;

                &:focus {
                    box-shadow: none;
                    border-color: $white;
                }
            }
        }

        /* STYLES FOR THE INPUT - SEE MORE INSIDE "/formelements/INPUTTYPE" */
        .form-control {
            padding: 0;
        }

        /* STYLES FOR ICONS FROM THE VALIDATOR */

        select+i.form-control-feedback {
            top: -10px !important;
        }

        .form-control-feedback {
            display: block;
            transition: top 0.25s;
            top: 28px;
            right: 10px;
            padding: 0;
            position: absolute;
            z-index: 2;
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }

        &.form-group-focus .form-control-feedback {
            top: 35px;
        }

        /* CONTAINER FOR VALIDATOR ERROR-MESSAGES */
        .error {
            .help-block {
                margin: 5px 0 5px 0;
                &:last-child {
                    margin: 5px 0 0 0;
                }
            }
        }

    }

    /* HEADLINES FOR FORMGROUPS - USED ON VODAFONE REGISTER FORM */
    /*---------------------------------------------------------------*/
    .formGroupHeadline {
        text-transform: uppercase;
        display: block;
        text-align: left;
        margin: 30px 0;
        border-bottom: 1px solid $white;
    }

}
