wagtail/client/scss/components/_switch.scss

@use "sass:math";

$switch-width: 40px;
$switch-height: 20px;
$switch-border: 2px;
$switch-outline: 3px;

$switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
$switch-outline-radius: $switch-border-radius + $switch-outline;

// All the greys in Wagtail are really dark or really bright
$switch-color-middle-grey: #777;

.switch {
    display: inline-flex;
    align-items: center;
    margin: 5px 0;

    // Disable forms styling that's applied to the <label> tag
    width: unset;
    float: unset;

    &__toggle {
        position: relative;
        cursor: pointer;

        &::before,
        &::after {
            content: '';
            transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
        }

        &::before {
            height: $switch-height;
            width: $switch-width;
            border-radius: $switch-border-radius;
            background: $switch-color-middle-grey;
            border: $switch-border solid $switch-color-middle-grey;
        }

        &::after {
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            transform: translate($switch-border, -50%);
            height: $switch-height;
            width: $switch-height;
            border: $switch-border solid $color-white;
            border-radius: 50%;
            background-color: $color-white;
        }
    }

    [type=checkbox]:checked + &__toggle::before {
        background: $color-teal;
        border-color: $color-teal;
    }

    [type=checkbox]:checked + &__toggle::after {
        transform: translate(calc(#{$switch-width} + #{$switch-border} - 100%), -50%);
    }

    [type=checkbox]:disabled + &__toggle {
        cursor: not-allowed;
        filter: grayscale(100%);
        opacity: 0.3;
    }

    [type=checkbox]:disabled + &__toggle::after {
        opacity: 0.5;
        box-shadow: none;
    }

    [type=checkbox]:focus + &__toggle {
        outline: $color-focus-outline solid $switch-outline;
        -moz-outline-radius: $switch-outline-radius;
    }

    [type=checkbox] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    // Colour changes for when displaying on teal background
    &--teal-background {
        $background: #03b0b1;

        .switch__toggle {
            &::before {
                background-color: #b9b9b9;
                border: $switch-border solid #b9b9b9;
                opacity: 0.6;
            }

            &::after {
                background-color: $color-white;
            }
        }

        [type=checkbox]:checked + .switch__toggle::before {
            // Override the white-background styling
            background-color: $background;
            border-color: $background;
            opacity: 1;
        }
    }
}