.c-toggle {

    $state--off-track   = $color--gray-1;
    $state--off-switch  = $color--gray-2
    $state--on-track    = alpha($color--main, 80%);
    $state--on-switch   = $color--main;
    $state--on-hover    = 0px 0px 0px 6px rgba(164,195,255,.82);
    $state--off-hover   = 0px 0px 0px 6px rgba(232,232,232,.45);

    display: inline-block;
    position: relative;
    margin: 4px 10px;
    cursor: pointer;

    &:hover {
        .c-toggle__switch {
            box-shadow: $state--off-hover;
        }

        .c-toggle__input:checked ~ .c-toggle__switch {
            box-shadow: $state--on-hover;
        }
    }

    &__input {
        position: absolute;
        opacity: 0;

        &:checked {
            & ~ .c-toggle__track {
                background-color: $state--on-track;
            }

            & ~ .c-toggle__switch {
                background-color: $state--on-switch;
                left: calc(100% - 20px);
            }
        }

        &:focus {
            & ~ .c-toggle__switch {
                box-shadow: $state--off-hover;
            }
            
            &:checked {
                & ~ .c-toggle__switch {
                    box-shadow: $state--on-hover;
                }
            }
        }
    }

    &__track {
        display: inline-block;
        width: 44px;
        height: 16px;
        border-radius: (@height / 2);
        background-color: $state--off-track;
        transition: .2s ease-out;
    }

    &__switch {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 24px;
        height: @width;
        border-radius: 50em;
        background-color: $state--off-switch;
        transition: .2s ease-out;
    }

    &--disabled {
        opacity: .5;
        pointer-events: none;
    }
}