div.m3.m3-switch
    margin: 4px
    gap: 20px
    box-sizing: content-box
    display: flex
    align-items: center
    justify-content: center
    width: 52px
    height: 32px

    & > svg
        overflow: visible
        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        width: 52px
        height: 32px

        & > g
            transform: translate(11.5%, 81%)
            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
            & > text
                font-family: Material-Symbols-Outlined-Regular
                font-size: 20px

        & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
            cy: 50%
            cx: 16px

        & > circle.m3.m3-switch-handler-state-layer
            r: 20px
            fill-opacity: 0

        & > circle.m3.m3-switch-handler
            r: 8px

        & > rect.m3.m3-switch-track
            transition: fill .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
            stroke-width: 2px
            border-radius: 16px
            rx: 15px
            width: 50px
            height: 30px

    & > input.m3
        cursor: pointer
        appearance: none
        opacity: 0 !important
        margin: 0
        width: 52px
        height: 32px
        position: absolute

        &:disabled
            cursor: not-allowed

        &:not(:checked, :disabled) + svg
            & > circle.m3.m3-switch-handler
                fill: var(--md-sys-color-outline)

        &:checked:not(:disabled) + svg
            & > g
                transform: translate(50%, 81%)

            & > circle.m3.m3-switch-handler
                fill: var(--md-sys-color-on-primary)

        &:not(:disabled) + svg
            & > g > text.m3.m3-icon-unchecked
                fill: var(--md-sys-color-on-primary)

            & > g > text.m3.m3-icon-checked
                fill: var(--md-sys-color-on-primary-container)

        &:checked:disabled + svg > circle.m3.m3-switch-handler
            fill: var(--md-sys-color-surface)

        &:checked + svg > circle.m3.m3-switch-handler,
        & + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
            r: 12px

        &:checked + svg
            & > g > text.m3.m3-icon-unchecked
                opacity: 0

            & > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer)
                cx: calc(100% - 16px)

        &:not(:checked) + svg
            & > g > text.m3.m3-icon-checked
                opacity: 0

        &:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler
            r: 14px

        &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
            fill: var(--md-sys-color-on-surface)
            fill-opacity: 38%

        &:hover:not(:disabled)
            &:checked + svg
                & > circle.m3.m3-switch-handler
                    fill: var(--md-sys-color-primary-container)

                & > circle.m3.m3-switch-handler-state-layer
                    fill: var(--md-sys-color-primary)
                    fill-opacity: 8%

            &:not(:checked) + svg
                & > circle.m3.m3-switch-handler
                    fill: var(--md-sys-color-on-surface-variant)

                & > circle.m3.m3-switch-handler-state-layer
                    fill: var(--md-sys-color-on-surface)
                    fill-opacity: 8%

        &:active:not(:disabled)
            &:checked + svg > circle.m3.m3-switch-handler-state-layer
                fill: var(--md-sys-color-primary)
                fill-opacity: 12%

            &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
                fill: var(--md-sys-color-on-surface)
                fill-opacity: 12%

        &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
            rx: 16px
            width: 52px
            height: 32px
            stroke-width: 0

        &:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track
            x: 1px
            y: 1px

        &:not(:checked) + svg > rect.m3.m3-switch-track
            stroke: var(--md-sys-color-outline)
            fill: var(--md-sys-color-surface-container-highest)

        &:checked + svg > rect.m3.m3-switch-track
            stroke: var(--md-sys-color-primary)
            fill: var(--md-sys-color-primary)

        &:disabled + svg
            & > g > text.m3
                fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)

            & > rect.m3.m3-switch-track
                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
                fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent)

        &:checked:disabled + svg
            & > g > text.m3
                transform: translateX(38.5%)
                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)

            & > rect.m3.m3-switch-track
                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)