/*
 * Form Styles
 */

form.styledForm {
    .clearfix();
    padding: 20px;

    fieldset {
        border: 0;
        margin: 0 0 20px;
        padding: 0;

        &:last-child {
            margin-bottom: 0;
        }
    }

    legend {
        display: none;
    }

    .buttonGroup:last-child {
        margin-bottom: 0;
    }

    &.withBackground {
        background: @light_color;
    }

    /*
     * Hide Anti Spam Field
     */

    .answer {
        display: none;
    }

    .row {
        float: left;
        width: 100%;
        margin: 0 0 15px;
        .clearfix();

        label {
            float: left;
            padding: 0 0 15px;
            font-family: @body_font;
            color: @text_color;
            margin: 0;
        }

        .chosen-container {
            width: 100%;

            .chosen-search {
                width: ~"calc(100% - 10px)";
            }
        }

        .inputWrap, .datepickerWrap {
            float: left;
            width: 100%;
        }

        input:not([type="checkbox"]):not([type="radio"]), textarea, select, .chosen-search input {
            float: left;
            position: relative;
            width: 100%;
            padding: 12px 10px;
            border: 1px solid @border_color;
            line-height: normal;
            border-radius: @border_radius;
            z-index: 10;
            color: @text_color;
            font-family: @body_font;
            .placeholder(lighten(@text_color, 10%));

            &:focus {
                border: 1px solid @primary_color;
            }
        }

        .validationMessage {
            .clearfix();
            clear: both;
            font-family: @body_font;
            padding: 10px 0;
            z-index: 5;
            border-radius: @border_radius;
            .ems(14);
            font-weight: 400;
            display: none;
            line-height: 22px;
        }

        .buttonInline {
            clear: both;
            display: flex;

            &:after {
                display: none;
            }

            select, input, .chosen-single {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                min-width: 200px;
                flex: 1 0;
            }

            button, .button, .buttonAlt {
                margin: 0;
                white-space: nowrap;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                height: auto;
            }
        }

        &.errorWrap, &.successWrap {

            .validationMessage {
                display: block;
            }

            .inputWrap, .datepickerWrap {
                position: relative;

                &:after {
                    position: absolute;
                    top: 10px;
                    right: 15px;
                    z-index: 10;
                }
            }
        }

        &.errorWrap {

            input::-webkit-contacts-auto-fill-button {
                margin-right: 25px;
            }

            .validationMessage {
                color: @alert_color;
            }

            .inputWrap {

                &:after {
                    .rems(16);
                    .fa(f06a, @alert_color);
                }
            }

            input:not([type="checkbox"]):not([type="radio"]), textarea, select, .chosen-search input {
                border-color: @alert_color;
            }
        }

        &.successWrap {

            .validationMessage {
                color: @success_color;
            }

            .inputWrap {

                &:after {
                    .rems(16);
                    .fa(f058, @success_color);
                }
            }

            input:not([type="checkbox"]):not([type="radio"]), textarea, select, .chosen-search input {
                border-color: @success_color;
            }
        }

        input[disabled] {
            background: @light_color;
            border: 1px solid @border_color;
        }

        /*
         * Checkboxes
         */

        input[type=checkbox] {
            float: left;
            display: inline;
            margin: 20px;
            padding: 0;
            *height: 13px;
            *width: 13px;
        }

        input[type=checkbox], input[type=radio] {
            position: absolute;
            left: -9999px;

            & + label {
                position: relative;
                float: left;
                padding: 0 0 0 30px;
                cursor: pointer;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                width: 100%;

                &:before {
                    position: absolute;
                    left: 0;
                    top: 2px;
                    width: 20px;
                    height: 20px;
                    border: 1px solid @border_color;
                    cursor: pointer;
                    content: '';
                    background: #fff;
                    border-radius: @border_radius;
                }

                &:after {
                    position: absolute;
                    top: 14px;
                    left: 5px;
                    .rems(15);
                    opacity: 0;
                    transition: opacity 0.25s;
                    transform: translateY(-50%);
                    .fa(f00c, @highlight_color);
                    border-radius: @border_radius;
                }
            }

            &:checked {

                & + label {

                    &:after {
                        opacity: 1;
                    }
                }
            }

            &[type=radio] {

                & + label {

                    &:before {
                        border-radius: 100%;
                        content: '';
                    }

                    &:after {
                        position: absolute;
                        top: 7px;
                        left: 5px;
                        background: #fff;
                        width: 12px;
                        height: 12px;
                        background: @highlight_color;
                        border-radius: 100%;
                        transform: scale(0);
                        transition: transform 0.25s;
                        content: '';
                    }
                }

                /*
                 * Set outline when keyboarding
                 */
                &:focus + label {

                    &:before {
                        border: 1px solid @highlight_color;
                    }
                }

                &:checked {

                    & + label {

                        &:after {
                            transform: scale(1);
                        }
                    }
                }
            }

            /*
             * Set outline when keyboarding
             */

            &:focus + label {

                &:before {
                    border: 1px solid @highlight_color;
                }
            }
        }
    }

    /*
     * Checkbox Toggle - Similar to the one seen in iOS
     */

    .checkboxToggle {
        visibility: hidden;

        + label {
            cursor: pointer;
            display: block;
            position: relative;
            box-shadow: inset 0 0 0px 1px #d5d5d5;
            text-indent: -5000px;
            height: 20px;
            width: 40px;
            border-radius: 10px;

            &:before {
                content: '';
                position: absolute;
                display: block;
                height: 20px;
                width: 18px;
                top: 0;
                left: 0;
                border-radius: 10px;
                transition: background 0.25s ease-in-out 0s, width 0.25s ease-in-out 0s;
            }

            &:after {
                content: '';
                position: absolute;
                display: block;
                height: 18px;
                width: 18px;
                margin: 1px;
                top: 0;
                left: 0;
                border-radius: 50%;
                background: @highlight_color;
                transition: left 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s;
            }
        }

        &:checked {

            + label {

                &:before {
                    width: 100%;
                    background: @highlight_color;
                }

                &:after {
                    left: 50%;
                    background: #fff;
                }
            }
        }
    }

    /*
     * Form inline styles
     */

    &.formInline {

        .row {

            .datepickerWrap, .buttonInline {
                clear: none;
            }

            label {
                width: 30%;
                padding: 8px 0; // padding adjusted to compensate for border on input

                @media @mobile {
                    width: 100%;
                }
            }

            .inputWrap, .datepickerWrap {
                padding: 0 0 0 20px;
                width: 70%;

                @media @mobile {
                    width: 100%;
                }
            }

            .mobileChosen {

                select {
                    position: absolute;
                    width: 100%;
                }
            }
        }

        .validationMessage {
            width: 70%;
            float: right;
            padding-left: 20px;

            @media @mobile {
                padding-left: 0;
                width: 100%;
                float: none;
            }
        }

        input[type=radio] + label + div,
        input[type=checkbox] + label + div {
            float: none;
            width: 100%;
            padding-left: 30px;
        }

        @media @mobile {

            .row {

                label {
                    clear: both;
                    width: 100%;
                }

                .inputWrap, .datepickerWrap {
                    padding: 0;
                    width: 100%;
                }
            }
        }
    }

    /*
     * Datepicker styles
     */

    .ui-datepicker-div {

        a {
            text-decoration: none;
        }
    }


    /*
     * File upload styling
     */

    .fileUpload {

        label {
            margin: 0;
        }

        input {
            display: none;
        }

        .fileName {
            display: block;
            clear: both;
            font-weight: 700;
            .rems(14);
            padding: 10px 0;

            span {
                display: block;
            }
        }
    }
}

/*
 * Number inputs - counter
 */
.numberArrowWrap {
    position: relative;

    input:not(.right) {
        padding-left: 35px;
    }

    input.right {
        padding-right: 35px;
    }
}

.numberButtons {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35px;

    .numberButton {
        position: absolute;
        left: 0;
        text-align: center;
        width: 100%;
        height: 50%;
        background: none;
        cursor: pointer;
        z-index: 300;

        &.add {
            top: 1px;
            line-height: 30px;
        }

        &.subtract {
            bottom: 1px;
            line-height: 20px;
        }
    }
}

.numberArrows {

    &.right {

        + .numberButtons {
            left: auto;
            right: 0;
        }
    }

    &.fade {

        + .numberButtons {
            opacity: 0;
            visibility: hidden;
            transition: opacity 400ms linear 0s, visibility 0s linear 400ms;
            z-index: 100;

            &:hover, &:focus {
                opacity: 1;
                visibility: visible;
                transition-delay: 0s;
            }
        }

        &:hover, &:focus {

            + .numberButtons {
                opacity: 1;
                visibility: visible;
                transition-delay: 0s;
            }
        }
    }
}
