//
// Checkbox
// --------------------------------------------------

@color-checkbox-checked:                        #1F99DC;

@color-checkbox-icon:                           #FFFFFF;
@color-checkbox-border:                         @input-border;

@color-checkbox-switch-bg:                      #f6f6f6;
@color-checkbox-switch-on:                      @brand-success;
@color-checkbox-switch-off:                     @color-grey-2;

@color-label-green:                             @color-checkbox-switch-on;
@color-label-red:                               @color-checkbox-switch-off;

//
// Checkbox
// --------------------------------------------------

.custom-checkbox.nolabel label,
.custom-radio.nolabel label {
    .text-hide();
}

//
// Nice Checkboxes & Radios
//

.custom-checkbox,
.custom-radio {
    padding-left: 23px;
    margin-top: 0;

    // Faux hide the native element for client side validation
    input[type=radio],
    input[type=checkbox] {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        // height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        opacity: 0;
    }

    label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 20px;
        margin-right: 15px;
        margin-left: -20px;
        font-size: @label-font-size;
        user-select: none;

        &:before {
            content: "";
            display: inline-block;
            text-align: center;
            color: @color-checkbox-icon;

            width: 16px;
            height: 16px;

            margin-right: 15px;
            position: absolute;
            left: -3px;
            top: 1px;
            background-color: transparent;
            .box-shadow(none);
        }
        &:hover:before {
            border-color: @input-border-focus;
        }
        &:active:before {
            border-color: @input-border-fade;
            border-width: 2px;
        }
    }

    input[type=radio] + label:before {
        background-position: -19px -19px;
    }

    input[type=radio]:checked + label {
        &:before {
            background-position: 0 -19px;
        }
    }

    input[type=radio][data-radio-color=green]:checked + label {
        &:before {
            background-position: -59px -19px;
        }
    }

    input[type=radio][data-radio-color=red]:checked + label {
        &:before {
            background-position: -79px -19px;
        }
    }

    input[type=checkbox] + label:before {
        background-position: -19px 0;
    }

    input[type=checkbox]:checked + label:before {
        background-position: 0 0;
    }

    input[type=checkbox]:indeterminate + label:before {
        background-position: -79px 0;
    }

    input:disabled + label{
        cursor: not-allowed;
    }

    input[type=checkbox]:disabled:checked + label:before {
        background-position: -39px 0;
    }

    input[type=radio]:disabled:checked + label:before {
        background-position: -39px -19px;
    }

    &:focus {
        outline: none;
        label:before {
            box-shadow: @outline-focus-shadow;
        }
    }

    p.form-text {
        margin-bottom: 17px;
    }
}

.custom-radio label:before {
    .border-radius(16px);
}

.custom-checkbox label:before {
    .border-radius(4px);
}

.inline-options {
    .field-checkboxlist:not(.is-scrollable) {
        .field-checkboxlist-inner {
            padding: 10px 15px 15px 15px;
        }

        .custom-checkbox {
            display: inline-block;
            margin: 0;

            label {
                margin-bottom: 0 !important;
                padding-top: 10px;

                &:before {
                    top: 10px;
                }
            }
        }
    }

    &.radio-field {
        > label {
            display: block;
        }

        .custom-radio {
            display: inline-block;
            margin-bottom: 0;
        }
    }
}

//
// ON / OFF Switcher
//

.switch-field {
    .field-switch {
        padding-left: 75px;
        float: left;

        > label {
            margin-top: 3px;
        }
    }
}

.custom-switch {
    display: block;
    width: 65px;
    height: 26px;
    position: relative;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    .border-radius(3px);

    * { .box-sizing(border-box); }
    &.disabled { opacity: .5; }
    .slide-button {
        z-index: @zindex-checkbox - 1;
        display: block;
        position: absolute;
        right: 42px;
        top: 3px;
        width: 20px;
        height: 20px;
        background-color: @color-checkbox-switch-bg;
        .border-radius(20px);
        .transition(all 0.1s);
    }

    label,
    > span {
        line-height: 23px;
        vertical-align: middle;
    }

    label {
        z-index: @zindex-checkbox - 2;
        width: 100%;
        display: block;
        position: relative;
    }

    input {
        z-index: @zindex-checkbox;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        &:checked {
            ~ .slide-button {
                right: 4px;
            }
            ~ span { background-color: @color-checkbox-switch-on; }
            ~ span span {
                &:first-of-type {
                    color: #FFFFFF;
                    display: block;
                }
                &:last-of-type {
                    color: #666666;
                    display: none;
                }
            }
        }
        &[disabled] {
            ~ span {
                background-color: #bdc3c7 !important;
                &, & + a {
                    cursor: default;
                }
            }
        }
    }

    > span {
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        width: 100%;
        background-color: @color-checkbox-switch-off;
        font-size: 12px;
        font-weight: 600;
        user-select: none;
        .border-radius(20px);

        span {
            z-index: @zindex-checkbox;
            display: block;
            position: absolute;
            top: 1px;
            left: -1px;
            .box-sizing(border-box);
            &:last-child {
                left: 28px;
                color: #FFFFFF;
                display: block;
            }
            &:first-of-type {
                padding-left: 13px;
                display: none;
                color: #666666;
            }
        }
    }
}