/*----------------------------------------------------------------------------*\
    Form
    Form elements

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

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

$use-forms: true !default;

$inputBackgroundColor:          #fff;
$inputBorderColor:              #eee;
$inputBorderFocusColor:         #444;
$radioBackgroundColor:          #eee;

$placeholderColor:              #000;

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

@if $use-forms == true{

    form {
        text-align: left;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select,
    .form-control {
        width: 100%;
        height: auto;
        font-size: 1.6rem;
        padding: 1rem 1.5rem;
        margin-bottom: 0.5rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        background: $inputBackgroundColor no-repeat;
        border: 0;
        border-bottom: 0.1rem solid rgba(color(brand), 0.2);
        border-radius: 0;
        box-shadow: none;
        outline: none;
        transition: all .3s;
        font-family: $font-base;

        /* Read-only */
        &[readonly] {
            background-color: $inputBackgroundColor;
        }

        /* Disabled */
        &[disabled] {
            opacity: 0.5;
            background-color: $inputBorderColor;
            cursor: not-allowed;
        }

        /* Focus */
        &:focus {
            border-color: $inputBorderFocusColor;
            box-shadow: none;
            outline: none;
        }
    }

    // Select inner
    .select-inner {
        line-height: 1;
        position: relative;
        white-space: nowrap;
        padding-right: 0;
        padding-left: 0;
        cursor: pointer;
        border: 0.1rem solid $inputBorderColor;

        // Arrow icon
        &:after {
            width: 1.3rem;
            height: 0.7rem;
            background-image: url("../img/icons/arrow-down.svg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            top :0;
            bottom: 0;
            right: 2rem;
            content: '';
            margin: auto 0;
        }

        span {
            font-size: 1.6rem;
            color: #49505A;
            height: 5rem;
            line-height: 4.8rem;
            white-space: nowrap;
            padding-right: 4rem;
            text-overflow: ellipsis;
            padding-left: 2rem;
            max-width: 100%;
            display: inline-block;
            overflow: hidden;
        }
    }

    // Select inner list
    .select-inner-list {
        display: inline-block;
        width: 25rem;
        height: auto;
        position: absolute;
        top: 100%;
        opacity: 0;
        visibility: hidden;
        left: 0;
        background-color: #fff;
        box-shadow: 0 0.6rem 2.4rem rgba(0,0,0,0.1);
        padding: 0;
        border-radius: 0.5rem;
        z-index: 9999;
        transition: all .3s;
        margin-bottom: 0;
        margin-top: 0;
        transform: translateY(-2rem);

        &._active {
            opacity: 1;
            visibility: visible;
            top: 100%;
            transform: translateY(0);
        }

        // List item
        li {
            color: #69737F;
            font-size: 1.6rem;
            font-weight: 700;
            display: inline-block;
            position: relative;
            text-decoration: none;
            width: 100%;
            height: auto;
            line-height: 2.5rem;
            padding: 1.5rem 2rem;
            border-bottom: 0.1rem solid #EBEBEB;
            float: left;
            transition: all .3s;
            cursor: pointer;

            &:hover {
                background: #F4F5F6;
            }

            &:before {display: none;}

            &:last-of-type {
                border-bottom-left-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
                border-bottom: none;
            }
        }
    }

    // Selectboxes
    select.form-control {
        background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDYxMiA2MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA2MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iX3gzMV8wXzM0XyI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik02MDQuNTAxLDEzNC43ODJjLTkuOTk5LTEwLjA1LTI2LjIyMi0xMC4wNS0zNi4yMjEsMEwzMDYuMDE0LDQyMi41NThMNDMuNzIxLDEzNC43ODIgICAgIGMtOS45OTktMTAuMDUtMjYuMjIzLTEwLjA1LTM2LjIyMiwwcy05Ljk5OSwyNi4zNSwwLDM2LjM5OWwyNzkuMTAzLDMwNi4yNDFjNS4zMzEsNS4zNTcsMTIuNDIyLDcuNjUyLDE5LjM4Niw3LjI5NiAgICAgYzYuOTg4LDAuMzU2LDE0LjA1NS0xLjkzOSwxOS4zODYtNy4yOTZsMjc5LjEyOC0zMDYuMjY4QzYxNC41LDE2MS4xMDYsNjE0LjUsMTQ0LjgzMiw2MDQuNTAxLDEzNC43ODJ6IiBmaWxsPSIjNDQ0NDQ0Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=');
        background-size: 1rem 1rem;
        background-position: right 1rem center;

        &::-ms-expand {
            display: none;
        }
    }

    // File uploads
    .input-group.file {

        input[type="file"] {
            opacity: 0;
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            cursor: pointer;
            &:hover + .sitekick-forms-fileupload-label {
                border-color: $inputBorderFocusColor !important;
            }
        }
        .sitekick-forms-fileupload-label {

            font-weight: normal;
            cursor: pointer;
            pointer-events: none;
            display: block;
            @extend .form-control;
            background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni4zIDQ4Ni4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODYuMyA0ODYuMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTUuNSwxMzUuOGMtNS4yLTMwLjktMjAuNS01OS4xLTQzLjktODAuNWMtMjYtMjMuOC01OS44LTM2LjktOTUtMzYuOWMtMjcuMiwwLTUzLjcsNy44LTc2LjQsMjIuNSAgICBjLTE4LjksMTIuMi0zNC42LDI4LjctNDUuNyw0OC4xYy00LjgtMC45LTkuOC0xLjQtMTQuOC0xLjRjLTQyLjUsMC03Ny4xLDM0LjYtNzcuMSw3Ny4xYzAsNS41LDAuNiwxMC44LDEuNiwxNiAgICBDMTYuNywyMDAuNywwLDIzMi45LDAsMjY3LjJjMCwyNy43LDEwLjMsNTQuNiwyOS4xLDc1LjljMTkuMywyMS44LDQ0LjgsMzQuNyw3MiwzNi4yYzAuMywwLDAuNSwwLDAuOCwwaDg2ICAgIGM3LjUsMCwxMy41LTYsMTMuNS0xMy41cy02LTEzLjUtMTMuNS0xMy41aC04NS42QzYxLjQsMzQ5LjgsMjcsMzEwLjksMjcsMjY3LjFjMC0yOC4zLDE1LjItNTQuNywzOS43LTY5ICAgIGM1LjctMy4zLDguMS0xMC4yLDUuOS0xNi40Yy0yLTUuNC0zLTExLjEtMy0xNy4yYzAtMjcuNiwyMi41LTUwLjEsNTAuMS01MC4xYzUuOSwwLDExLjcsMSwxNy4xLDNjNi42LDIuNCwxMy45LTAuNiwxNi45LTYuOSAgICBjMTguNy0zOS43LDU5LjEtNjUuMywxMDMtNjUuM2M1OSwwLDEwNy43LDQ0LjIsMTEzLjMsMTAyLjhjMC42LDYuMSw1LjIsMTEsMTEuMiwxMmM0NC41LDcuNiw3OC4xLDQ4LjcsNzguMSw5NS42ICAgIGMwLDQ5LjctMzkuMSw5Mi45LTg3LjMsOTYuNmgtNzMuN2MtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXM2LDEzLjUsMTMuNSwxMy41aDc0LjJjMC4zLDAsMC42LDAsMSwwYzMwLjUtMi4yLDU5LTE2LjIsODAuMi0zOS42ICAgIGMyMS4xLTIzLjIsMzIuNi01MywzMi42LTg0QzQ4Ni4yLDE5OS41LDQ0Ny45LDE0OS42LDM5NS41LDEzNS44eiIgZmlsbD0iIzQ0NDQ0NCIvPgoJCTxwYXRoIGQ9Ik0zMjQuMiwyODBjNS4zLTUuMyw1LjMtMTMuOCwwLTE5LjFsLTcxLjUtNzEuNWMtMi41LTIuNS02LTQtOS41LTRzLTcsMS40LTkuNSw0bC03MS41LDcxLjVjLTUuMyw1LjMtNS4zLDEzLjgsMCwxOS4xICAgIGMyLjYsMi42LDYuMSw0LDkuNSw0czYuOS0xLjMsOS41LTRsNDguNS00OC41djIyMi45YzAsNy41LDYsMTMuNSwxMy41LDEzLjVzMTMuNS02LDEzLjUtMTMuNVYyMzEuNWw0OC41LDQ4LjUgICAgQzMxMC40LDI4NS4zLDMxOC45LDI4NS4zLDMyNC4yLDI4MHoiIGZpbGw9IiM0NDQ0NDQiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K');
            background-size: 1rem 1rem;
            background-position: right 1rem center;
        }
    }

    // Input groups
    .input-group {
        width: 100%;
        text-align: left;
        margin-bottom: 1.5rem;

        label {
            font-size: 1.6rem;
        }
    }

    // Radio buttons
    .input-group.radio {
        cursor: pointer;
        margin-bottom: 1rem;

        // Hide browser default radio
        input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        // Styling custom radio button
        label {
            position: relative;
            padding-left: 2.5rem;
            font-size: 1.4rem;
            cursor: pointer;
            text-align: left;
            display: inline-block;
            line-height: 1.5;

            &:after {
                height: 1.5rem;
                width: 1.5rem;
                background-color: transparent;
                border: 0.1rem solid rgba(#000, 0.3);
                display: inline-block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                margin: auto 0;
                transition: all .3s;
                content: '';
                border-radius: 0.3rem;
                z-index: 1;
            }

            // Check icon
            &:before {
                width: 1.6rem;
                height: 1.6rem;
                background-image: url('/Igolf/img/icons/check.svg');
                -webkit-background-size: 1.2rem 1.2rem;
                background-size: 1.2rem 1.2rem;
                background-repeat: no-repeat;
                background-position: center center;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                margin :auto 0;
                content: '';
                transition: all .3s;
                opacity: 0;
                z-index: 2;
            }
        }

        // Checked input sets up styling for custom radio button
        input:checked ~ label {

            &:after{
                border-color: color(brand);
                background-color: color(brand);
            }

            // Dot inner
            &:before {
                opacity: 1;
            }
        }
    }
    .radio-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: left;

        .input-group {
            width: auto;
        }

        .radio,
        .radio+.radio {
            margin-top: 0;
            margin-right: 1rem;
        }
    }

    // Checkboxes
    .input-group.checkbox {
        cursor: pointer;
        margin-bottom: 1rem;

        // Hide browser default checkbox
        input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        // Styling custom checkbox button
        label {
            position: relative;
            padding-left: 2.5rem;
            font-size: 1.4rem;
            cursor: pointer;
            text-align: left;
            display: inline-block;
            line-height: 1.5;

            &:after {
                height: 1.5rem;
                width: 1.5rem;
                background-color: transparent;
                border: 0.1rem solid rgba(#000, 0.3);
                display: inline-block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                margin: auto 0;
                transition: all .3s;
                content: '';
                border-radius: 0.3rem;
                z-index: 1;
            }

            // Check icon
            &:before {
                width: 1.6rem;
                height: 1.6rem;
                background-image: url('/Igolf/img/icons/check.svg');
                -webkit-background-size: 1.2rem 1.2rem;
                background-size: 1.2rem 1.2rem;
                background-repeat: no-repeat;
                background-position: center center;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                margin :auto 0;
                content: '';
                transition: all .3s;
                opacity: 0;
                z-index: 2;
            }
        }

        // Checked input sets up styling for custom checkbox button
        input:checked ~ label {

            &:after{
                border-color: color(brand);
                background-color: color(brand);
            }

            // Dot inner
            &:before {
                opacity: 1;
            }
        }
    }
    .checkbox-group {
        margin-bottom: 1.5rem;
        .input-group {
            margin: 0 0 0.2rem 0;
        }
    }

    // Form title
    .form-title {
        font-weight: bold;
        text-align: left;
        border-bottom: 0.1rem solid $inputBorderColor;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    // Parsley form validation
    .parsley-errors-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        color: #e74c3c;
        margin-bottom: 1rem;
        margin-top: 0.5rem;
        font-weight: 400;
        transition: all .3s;
        font-size:  1.4rem;
        display: inline-block;

        // List item
        li {
            line-height: 1.2;
            position: relative;
            padding-left: 0;
            margin: 0.5rem 0;
        }
    }
    input.parsley-error,textarea.parsley-error, select.parsley-error {
        margin-bottom: 0!important;
        border: 0.1rem solid #e74c3c!important;
    }

    // No resize for textarea's
    textarea {
        resize: none;
    }

    // Form row
    form .row {
        display: flex;
        flex-wrap: wrap;

        &:before,&:after {
            display: none;
        }
    }

    // Placeholders
    ::-webkit-input-placeholder {
        color: $placeholderColor;
    }
    :-ms-input-placeholder {
        color: $placeholderColor;
    }
    ::placeholder {
        color: $placeholderColor;
    }

    /* Postal address messages */
    .sitekick-form-address-loading,
    .sitekick-form-address-warning {
        padding: 1.5rem 0;
    }

}