/* Copyright (C) 2016 NooBaa */

toggle-switch {
    @radius: 7px;
    @margin: 4px;
    @size: (@radius + @margin) * 2;

    height: 42px;
    line-height: 42px;
    display: inline-block;
    vertical-align: middle;

    > .toggle-wrapper {
        cursor: default;
    }

    .toggle-box {
        width: @size * 2;
        height: @size;
        vertical-align: middle;
        cursor: @cursor-pointer;

        > .outer-capsule {
            x: 1;
            y: 1;
            width: @size * 2 - 2;
            height: @size - 2;
            rx: @size/2;
            fill: rgb(var(--color15));
        }

        > .inner-circle {
            cx: @size/2 + 1;
            cy: @size/2;
            r: @radius;
            fill: rgb(var(--color11));
            transition: all 350ms ease;
        }
    }

    .toggle-label {
        display: inline-block;
        vertical-align: middle;
        text-transform: capitalize;
        cursor: @cursor-pointer;
        margin-left: 4px;
        line-height: 1em;
        color: rgb(var(--color11));
    }

    :checked {
        + .toggle-box > .inner-circle {
            cx: @size * 1.5 - 1;
            fill: rgb(var(--color20));
        }

        ~ .toggle-label {
            color: rgb(var(--color17));
        }
    }

    :focus {
        ~ .toggle-box > .outer-capsule {
            stroke-width: 1;
            stroke: rgb(var(--color20));
        }

        ~ .toggle-label {
            color: rgb(var(--color20));
        }
    }

    :disabled {
        + .toggle-box {
            opacity: .5;
            cursor: default;
        }

        ~ .toggle-label {
            color: rgb(var(--color09));
            cursor: default;
        }
    }
}
