// custom checkboxes
.checkbox.custom, .radio.custom {

    margin-bottom: 8px;
    padding-left: 2rem;
    font-size: 14px;
    line-height: 24px;
    position: relative;

    label { padding: 0; }

    input {
        margin: 0;
        top: 3px;
        left: 0;
        &:focus {
            height: 17px;
            width: 16px;
        }
    }

    input + i.toggle {
        text-align:left;
        position: absolute;
        // allows growing with Text zoom
        min-width:  ~"calc(1em + 4px)";
        min-height: ~"calc(1em + 4px)";
        border-radius: @checkbox-radius;
        border: 1px solid @control-border-color;
        background-color: white;
        font: normal normal normal 12px/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        left: 0;
        top: 0.5em;
        padding: 1px 0 0 1px;
        transition: background-color 0.2s;
    }

    input + i.toggle:before {
        display: none;
    }

    // checked

    input:checked + i.toggle {
        color: @control-color;
        background-color: @control-background;
        border-color: @control-border-color-checked;
    }

    input:checked + i.toggle:before {
        content: "\f00c";
        display: inherit;
    }

    // focus

    input:focus + i.toggle {
        border-color: @control-focus;
        box-shadow: 0 0 8px 1px fade(@control-focus, 60%);
    }

    // disabled

    input:disabled + i.toggle {
        opacity: 0.50;
        cursor: not-allowed;
        background-color: #eee;
    }

    input:checked:disabled + i.toggle {
        border-color: #767676;
        background-color: #aaa;
    }

    .form-horizontal & {
        padding-top: 0;
        top: 5px;
    }
}

.radio.custom {

    input + i.toggle {
        border-radius: 0.5rem;
        padding: 0.25rem;
    }

    input:checked + i.toggle:before {
        content: "";
        width: ~"calc(0.25rem + 2px)";
        height: ~"calc(0.25rem + 2px)";
        border-radius: 50%;
        background-color: @control-color;
    }
}

.checkbox.switch {

    margin-bottom: 8px;
    padding-left: 72px;
    position: relative;

    label {
        padding: 0;
        line-height: 32px;
    }

    // inspired by http://abpetkov.github.io/switchery/

    input + i.toggle {
        position: absolute;
        display: inline-block;
        vertical-align: middle;
        left: 0;
        height: 32px;
        width: 56px;
        border: 1px solid @hc-gray;
        border-radius: 16px;
        margin-right: 16px;
        background-color: #eee;
        transition: border 0.2s, background-color 0.2s;
    }

    input + i.toggle:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0;
        left: 0;
        border-radius: 16px;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
        transition: left 0.2s;
    }

    input:checked + i.toggle {
        border-color: transparent;
        background-color: @switch-background;
    }

    input:checked + i.toggle:before {
        left: 24px;
    }

    input:focus + i.toggle {
        border-color: @blue-dark;
        box-shadow: 0 0 0 3px fade(@blue-dark, 40%);
    }

    input:disabled + i.toggle {
        opacity: 0.50;
        cursor: not-allowed;
    }

    input:checked:disabled + i.toggle {
        border-color: #767676;
        background-color: #aaa;
    }

    // small

    &.small {

        padding-left: 56px;

        label { line-height: 24px; }

        input + i.toggle {
            height: 24px;
            width: 40px;
            border-radius: 12px;
            margin-right: 12px;
        }

        input + i.toggle:before {
            width: 22px;
            height: 22px;
        }

        input:checked + i.toggle:before {
            left: 16px;
        }
    }
}