.switch {
    align-items: center;
    cursor: default;
    display: flex;
    height: var(--size-medium);
    position: relative;

    &__toggle {
        opacity: 0;
    }
    /*
    &__toggle:focus + &__label:before {
        box-shadow: 0 0 0 2px var(--blue);
    }
    */
    &__toggle:checked + &__label:before {
        color: var(--black8);
        background-color: var(--black8-opaque);
    }
    &__toggle:checked + &__label:after {
        transform: translateX(12px);
    }
    &__toggle:checked:disabled + &__label:before {
        border: 1px solid var(--black);
        background-color: var(--black);
    }
    &__toggle:disabled + &__label {
        color: var(--black);
        opacity: 0.3;
    }

    &__label {
        align-items: center;
        color: var(--black8);
        display: flex;
        font-family: var(--font-stack);
        font-size: var(--font-size-xsmall);
        font-weight: var(--font-weight-normal);
        height: 100%;
        letter-spacing: var(--font-letter-spacing-pos-xsmall);
        line-height: var(--font-line-height);
        margin-left: -16px;
        padding: 0 var(--size-xsmall) 0 calc(var(--size-xlarge) - 2px);
        user-select: none;

        &:before {
            background-color: var(--white);
            border: 1px solid var(--black8-opaque);
            border-radius: 6px;
            content: '';
            display: block;
            height: 10px;
            left: 8px;
            position: absolute;
            top: 10px;
            transition: background-color 0 0.2s;
            width: 22px;
        }
        &:after {
            background-color: var(--white);
            border: 1px solid var(--black8-opaque);
            border-radius: 50%;
            content: '';
            display: block;
            height: 10px;
            left: 8px;
            position: absolute;
            top: 10px;
            transition: transform 0.2s;
            width: 10px;
        }
    }
}