/*----------------------------------------------------------------------------*\
    FORM
\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/



/*  Component
\*----------------------------------------------------------------------------*/

form:not(#cropper-settings) {

    .col-xs-12 {
        width: 100%;
        // Set icons
        &.icon--user .input-group:before {background-image: url('/igolf/img/icon-input-name.svg');}
        &.icon--email .input-group:before {background-image: url('/igolf/img/icon-input-email.svg');}
        &.icon--password .input-group:before {background-image: url('/igolf/img/icon-input-password.svg');}
        &.icon--location .input-group:before {background-image: url('/igolf/img/icon-input-location.svg');}
        &.icon--holes .input-group:before {background-image: url('/igolf/img/icon-input-holes.svg'); margin-top: 5px; }
        &.icon--date .input-group:before {background-image: url('/igolf/img/icon-calendar.svg');}
        &.icon--time .input-group:before {background-image: url('/igolf/img/icon-time.svg');}
        &.icon--text .input-group:before {background-image: url('/igolf/img/icon-input-comment.svg');}
        &.icon--cup .input-group:before {background-image: url('/igolf/img/icon-cup.svg');}
    }

    .input-group {
        position: relative;
        width: 100%;

        &:before {
            content: "";
            position: absolute;
            width: 1.8rem;
            height: 1.8rem;
            bottom: 2rem;
            background-size: 1.8rem 1.8rem;
            @include media-query(xs) {

            }
        }

        label {
            font-family: $font-bold;
            font-size: 1.2rem;
            text-transform: uppercase;
        }



        .form-control {
            width: 100%;
            background: none;
            padding-left: 2.5rem;
            border: 0;
            border-bottom: 0.1rem solid rgba(18, 40, 54, 0.2);

            &::placeholder {
                color: rgba(color(brand), 0.4);
            }

            &::-webkit-input-placeholder {
                color: rgba(color(brand), 0.4);
            }

            &.parsley-error {
                border: 0 !important;
                border-bottom: 0.1rem solid red !important;
                margin-bottom: 0.5rem !important;
            }

            @include media-query(xs) {
                padding-top: 0;
            }

            &#time-hour {
                padding: 0.4rem 1rem 0.4rem 2.1rem !important;
            }

            &#time-minutes {
                padding: 0.4rem 1rem 0.4rem 2.1rem !important;
            }

        }

        // selects
        select.form-control {
            padding-top: 5px;
            padding-bottom: 4px;
        }

        &.input-group--no-icon .form-control {
            padding-left: 0;
            padding-right: 0;
        }

        .parsley-errors-list {
            display: none !important;
        }

        // show parsley for password
        &.icon--password {
            .parsley-errors-list.filled {
                display: block !important;
            }
        }

        .select-inner {
            border: 0;
        }

        // textarea's
        &.textarea {
            &:before {
                top: 5rem;
                @include media-query(xs) {
                    top: 4rem;
                }
            }
        }

        // Set icons
        &.icon--user:before {background-image: url('/igolf/img/icon-input-name.svg');}
        &.icon--email:before {background-image: url('/igolf/img/icon-input-email.svg');}
        &.icon--password:before {background-image: url('/igolf/img/icon-input-password.svg');}
        &.icon--location:before {background-image: url('/igolf/img/icon-input-location.svg');}
        &.icon--holes:before {background-image: url('/igolf/img/icon-input-holes.svg'); margin-top: 5px; }
        &.icon--date:before {background-image: url('/igolf/img/icon-calendar.svg');}
        &.icon--time:before {background-image: url('/igolf/img/icon-time.svg');}
        &.icon--text:before {background-image: url('/igolf/img/icon-input-comment.svg');}
        &.icon--phone:before {background-image: url('/igolf/img/icon-course-contact.svg');}
        &.icon--cup:before {background-image: url('/igolf/img/icon-cup.svg');}

        // Checkbox
        &.checkbox {
            &:before {display: none;}
            border-bottom: none;

            // Label
            label {
                font-weight: 400;
                font-size: 1.6rem;
                line-height: 2.4rem;
                text-transform: none;
                font-family: $font-base;
                padding-left: 3rem;
                &:after {
                    width: 2.1rem;
                    height: 2.1rem;
                    top: 0.2rem;
                    margin-top: 0;
                    border: 0.1rem solid rgba(18, 40, 54, 0.2);
                    border-radius: 0;
                }
                &:before {
                    width: 2.1rem;
                    height: 2.1rem;
                    top: 0.2rem;
                    margin-top: 0;
                    background-image: url(/igolf/img/icon-check-white.svg);
                }
            }

            input:checked ~ label:after {
                background-color: color(blue);
            }
        }
    }

    .extra-player-info {
        label {
            width: 100%;
            font-family: $font-bold;
            font-size: 1.2rem;
            text-transform: uppercase;
        }
    }
}

/** RADIO buttons **/
.radio {
    label {
        cursor: pointer;
        &:hover {
            color: lighten(color(brand), 20%);
        }
    }
    input {
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid #ccc;
        background: white;
        width: 17px;
        height: 17px;
        margin-bottom: 2px;
        vertical-align: middle;
        border-radius: 20px;
        &:checked {
            background-color: color(green);
        }
    }
}