%toggle {
    display: inline-block;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    position: relative;
    vertical-align: middle;
    @include transition (background-color 0.3s ease-in-out);
}

%knob {
    position: absolute;
    background: $white;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    @include transition (all 0.3s ease-in-out);
}

@mixin toggle-ui($size: 18px, $round: false){
    @extend %toggle;
    border-radius: $size;

    @if $round == false { @include size(($size * 2) $size); }
    @else               { @include size($size $size); }

    .knob {
        @extend %knob;
        @if $round == false { @include size(($size + 2) ($size - 2)); }
        @else               { @include size(($size - 6) ($size - 6)); }
        border-radius: $size + 2;
    }
}

@mixin enabler($on: $black, $off: $white, $size: 18px){
    outline: transparent;

    .toggle {
        background-color: $off;

        .knob {
            top: 1px;
            left: 1px;
        }
    }

    & [type="hidden"] + .toggle {
        @include toggle-ui($size, false);
    }

    & [type="radio"] {
        display: none;
    }

    & [type="radio"] + .toggle {
        @include toggle-ui($size, true);

        .knob {
            left: 3px;
            top: 3px;
            opacity: 0;
        }
    }

    & [type="hidden"][value="1"] + .toggle {
        background-color: $on;

        .knob {
            left: $size - 2 - 1;
        }
    }

    & [type="radio"]:checked + .toggle {
        background-color: $on;

        .knob {
            opacity: 1;
        }
    }
}