/*
 * Form Styles
 */

form.styledForm {
    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: var(--light_color);
    }

    /*
     * Hide Anti Spam Field
     */

    .answer {
        display: none;
    }

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

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

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

            &.numberArrowWrap {
                position: relative;

                input {
                    padding-left: 35px;
                }
            }

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

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

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

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

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

            &:focus {
                border: 1px solid var(--primary_color);
            }
        }

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

        .buttonInline {
            clear: both;
            display: flex;

            &:after {
                display: none;
            }

            select, input {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                min-width: 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 {

            .validationMessage {
                color: var(--alert_color);
            }

            .inputWrap {

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

            input:not([type='checkbox']), input:not([type='radio']), textarea, select {
                border-color: var(--alert_color);
            }
        }

        &.successWrap {

            .validationMessage {
                color: var(--success_color);
            }

            .inputWrap {

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

            input:not([type='checkbox']), input:not([type='radio']), textarea, select {
                border-color: var(--success_color);
            }
        }

        input[disabled] {
            background: var(--light_color);
            border: 1px solid var(--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 var(--border_color);
                    cursor: pointer;
                    content: '';
                    background: #fff;
                    border-radius: var(--border_radius);
                }

                &:after {
                    position: absolute;
                    top: 14px;
                    left: 5px;
                    .rems(15);
                    opacity: 0;
                    transition: opacity 0.25s;
                    transform: translateY(-50%);
                    .fa(f00c, var(--highlight_color));
                    border-radius: var(--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: var(--highlight_color);
                        border-radius: 100%;
                        transform: scale(0);
                        transition: transform 0.25s;
                        content: '';
                    }
                }

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

                    &:before {
                        border: 1px solid var(--highlight_color);
                    }
                }

                &:checked {

                    & + label {

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

            /*
             * Set outline when keyboarding
             */

            &:focus + label {

                &:before {
                    border: 1px solid var(--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: var(--highlight_color);
                transition: left 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s;
            }
        }

        &:checked {

            + label {

                &:before {
                    width: 100%;
                    background: var(--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
            }

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

        }

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

            @media @medium {
                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;
            }
        }
    }
}
