/* Customizable styles */

/* Colors: Default (blue) */
.SoDToggleButton{
    color: #fff;
}

    .SoDToggleButton> input + .toggle:before {
        content: 'ON';
    }

    .SoDToggleButton> input + .toggle:after {
        content: 'OFF';
    }

    .SoDToggleButton> input + .toggle > .switch {
        background: #fff;
    }

    .SoDToggleButton> input + .toggle + .label {
        color: #000;
    }

    .SoDToggleButton > input:checked + .toggle {
        background: #52c41a;
    }

    .SoDToggleButton > input:not(:checked) + .toggle {
        background: #f5222d;
    }

    .SoDToggleButton > input:checked + .toggle > .switch {
        border: 3px solid #52c41a;
    }

    .SoDToggleButton> input:not(:checked) + .toggle > .switch {
        border: 3px solid #ccc;
    }

    .SoDToggleButton> input:focus + .toggle,
    .SoDToggleButton> input:active + .toggle {
        box-shadow: 0 0 5px 3px rgba(0, 119, 200, 0.50);
    }

    /* Rounded switch corners */
    .SoDToggleButton> input + .toggle {
        border-radius: 4px;
    }

        .SoDToggleButton> input + .toggle .switch {
            border-radius: 6px;
        }

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.SoDToggleButton{
    display: inline-flex;
    align-items: center;
    user-select: none;
    position: relative;
    vertical-align: middle;
    margin-bottom: 0;
}

    .SoDToggleButton:hover {
        cursor: pointer;
    }

    .SoDToggleButton> input {
        position: absolute;
        opacity: 0;
    }

        .SoDToggleButton> input + .toggle {
            align-items: center;
            position: relative;
        }

        .SoDToggleButton> input + .toggle {
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
        }

        .SoDToggleButton> input[disabled] + .toggle {
            opacity: 0.5;
        }

            .SoDToggleButton> input[disabled] + .toggle:hover {
                cursor: not-allowed;
            }

        .SoDToggleButton> input + .toggle {
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

            .SoDToggleButton> input + .toggle > .switch {
                display: block;
                height: 100%;
                position: absolute;
                right: 0;
                z-index: 3;
                box-sizing: border-box;
            }

            /* Labels */
            .SoDToggleButton> input + .toggle:before,
            .SoDToggleButton> input + .toggle:after {
                display: flex;
                align-items: center;
                position: absolute;
                z-index: 2;
                height: 100%;
            }

            .SoDToggleButton> input + .toggle:before {
                right: 55%;
            }

            .SoDToggleButton> input + .toggle:after {
                left: 50%;
            }

            .SoDToggleButton> input + .toggle + .label {
                margin-left: 10px;
            }

    .SoDToggleButton[data-label='left'] > input + .toggle {
        order: 2;
    }

        .SoDToggleButton[data-label='left'] > input + .toggle + .label {
            order: 1;
            margin-left: 0;
            margin-right: 10px;
        }

    /* Show / Hide */
    .SoDToggleButton> input + .toggle:before {
        opacity: 0;
    }

    .SoDToggleButton> input:checked + .toggle:before {
        opacity: 1;
    }

    .SoDToggleButton> input:checked + .toggle:after {
        opacity: 0;
    }

    /* Transitions */
    .SoDToggleButton> input + .toggle {
        transition: background 200ms linear, box-shadow 200ms linear;
    }

        .SoDToggleButton> input + .toggle:before,
        .SoDToggleButton> input + .toggle:after {
            transition: all 200ms linear;
        }

        .SoDToggleButton> input + .toggle > .switch {
            transition: right 200ms linear, border-color 200ms linear;
        }
    /* //////////////////////////
CORE STYLES ABOVE - NO TOUCHY
////////////////////////// */

    /* Size: Extra Large */
    .SoDToggleButton[data-size='xl'] > input + .toggle {
        width: 85px;
        height: 40px;
    }

        .SoDToggleButton[data-size='xl'] > input + .toggle > .switch {
            width: 40px;
        }

        .SoDToggleButton[data-size='xl'] > input + .toggle:before,
        .SoDToggleButton[data-size='xl'] > input + .toggle:after {
            font-size: 1.2rem;
        }

    .SoDToggleButton[data-size='xl'] > input:not(:checked) + .toggle > .switch {
        right: calc(100% - 40px);
    }

    /* Size: Large */
    .SoDToggleButton[data-size='lg'] > input + .toggle {
        width: 75px;
        height: 35px;
    }

        .SoDToggleButton[data-size='lg'] > input + .toggle > .switch {
            width: 35px;
        }

        .SoDToggleButton[data-size='lg'] > input + .toggle:before,
        .SoDToggleButton[data-size='lg'] > input + .toggle:after {
            font-size: 1rem;
        }

    .SoDToggleButton[data-size='lg'] > input:not(:checked) + .toggle > .switch {
        right: calc(100% - 35px);
    }

    /* Size: Default (Medium) */
    .SoDToggleButton> input + .toggle {
        width: 65px;
        height: 30px;
    }

        .SoDToggleButton> input + .toggle > .switch {
            width: 30px;
        }

        .SoDToggleButton> input + .toggle:before,
        .SoDToggleButton> input + .toggle:after {
            font-size: 0.8rem;
        }

    .SoDToggleButton> input:not(:checked) + .toggle > .switch {
        right: calc(100% - 30px);
    }

    /* Size: Small */
    .SoDToggleButton[data-size='sm'] > input + .toggle {
        width: 55px;
        height: 25px;
    }

        .SoDToggleButton[data-size='sm'] > input + .toggle > .switch {
            width: 25px;
        }

        .SoDToggleButton[data-size='sm'] > input + .toggle:before,
        .SoDToggleButton[data-size='sm'] > input + .toggle:after {
            font-size: 0.7rem;
        }

    .SoDToggleButton[data-size='sm'] > input:not(:checked) + .toggle > .switch {
        right: calc(100% - 25px);
    }

    /* Size: Extra Small */
    .SoDToggleButton[data-size='xs'] > input + .toggle {
        width: 45px;
        height: 20px;
    }

        .SoDToggleButton[data-size='xs'] > input + .toggle > .switch {
            width: 20px;
        }

        .SoDToggleButton[data-size='xs'] > input + .toggle:before,
        .SoDToggleButton[data-size='xs'] > input + .toggle:after {
            font-size: 0.5rem;
        }

    .SoDToggleButton[data-size='xs'] > input:not(:checked) + .toggle > .switch {
        right: calc(100% - 20px);
    }

    /* Style: Rounded */
    .SoDToggleButton[data-style='rounded'] > input + .toggle,
    .SoDToggleButton[data-style='rounded'] > input + .toggle > .switch {
        border-radius: 50px;
    }

        .SoDToggleButton[data-style='rounded'] > input + .toggle:before {
            right: 50%;
        }

        .SoDToggleButton[data-style='rounded'] > input + .toggle:after {
            left: 50%;
        }

    /* Style: Square */
    .SoDToggleButton[data-style='square'] > input + .toggle {
        border-radius: 0;
    }

        .SoDToggleButton[data-style='square'] > input + .toggle .switch {
            border-radius: 0;
        }

    /* Text: Off */
    .SoDToggleButton[data-text='false'] > input + .toggle:before,
    .SoDToggleButton[data-text='false'] > input + .toggle:after {
        content: '';
    }

    .SoDToggleButton[data-text='false'][data-size='xl'] > input + .toggle {
        width: 80px;
    }

    .SoDToggleButton[data-text='false'][data-size='lg'] > input + .toggle {
        width: 70px;
    }

    .SoDToggleButton[data-text='false'] > input + .toggle {
        width: 60px;
    }

    .SoDToggleButton[data-text='false'][data-size='sm'] > input + .toggle {
        width: 50px;
    }

    .SoDToggleButton[data-text='false'][data-size='xs'] > input + .toggle {
        width: 40px;
    }

    /* Color: Red */
    .SoDToggleButton[data-color='red'] > input:checked + .toggle {
        background: #e74c3c;
    }

        .SoDToggleButton[data-color='red'] > input:checked + .toggle > .switch {
            border-color: #e74c3c;
        }

    /* Color: Orange */
    .SoDToggleButton[data-color='orange'] > input:checked + .toggle {
        background: #e67e22;
    }

        .SoDToggleButton[data-color='orange'] > input:checked + .toggle > .switch {
            border-color: #e67e22;
        }

    /* Color: Yellow */
    .SoDToggleButton[data-color='yellow'] > input:checked + .toggle {
        background: #f1c40f;
    }

        .SoDToggleButton[data-color='yellow'] > input:checked + .toggle > .switch {
            border-color: #f1c40f;
        }

    /* Color: Green */
    .SoDToggleButton[data-color='green'] > input:checked + .toggle {
        background: #2ecc71;
    }

        .SoDToggleButton[data-color='green'] > input:checked + .toggle > .switch {
            border-color: #2ecc71;
        }

    /* Color: Blue */
    .SoDToggleButton[data-color='blue'] > input:checked + .toggle {
        background: #3498db;
    }

        .SoDToggleButton[data-color='blue'] > input:checked + .toggle > .switch {
            border-color: #3498db;
        }

    /* Color: Purple */
    .SoDToggleButton[data-color='purple'] > input:checked + .toggle {
        background: #9b59b6;
    }

        .SoDToggleButton[data-color='purple'] > input:checked + .toggle > .switch {
            border-color: #9b59b6;
        }

    /* Color: Gray */
    .SoDToggleButton[data-color='gray'] > input:checked + .toggle {
        background: #555;
    }

        .SoDToggleButton[data-color='gray'] > input:checked + .toggle > .switch {
            border-color: #555;
        }