div.m3.m3-checkbox-container
    @include m3-checkbox-container-mixin

    & > span.m3.m3-checkbox-state-layer
        @include m3-state-layer-mixin

    & > span.m3.m3-checkbox-ripple-layer
        z-index: 20
        width: 2.5rem
        height: 2.5rem
        contain: content
        border-radius: 50%
        position: absolute

input[type="checkbox"].m3.m3-checkbox
    @include center(flex)

    z-index: 10
    width: 1.125rem
    height: 1.125rem
    appearance: none
    position: absolute
    border-radius: .14rem
    box-sizing: content-box
    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

    & ~ span.m3-checkbox-state
        position: absolute
        color: var(--md-sys-color-on-surface-variant)
        transition: color .2s cubic-bezier(0.2, 0, 0, 1)

    &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
        & ~ span.m3-checkbox-state
            color: var(--md-sys-color-error)

        background: var(--md-sys-color-on-error)

    &:is(:user-invalid, .m3.m3-error):not(:checked)
        & ~ span.m3-checkbox-state
            color: var(--md-sys-color-error)

    &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
        & ~ span.m3-checkbox-state
            color: var(--md-sys-color-primary)

        background: var(--md-sys-color-on-primary)

    &:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
        color: var(--md-sys-color-on-surface)

    &:disabled ~ *
        &:is(:hover, &, :checked)
            opacity: 38%

    & ~ span.m3-checkbox-state
        @include center(flex)

        z-index: 10
        font-size: 24px
        font-weight: 700
        line-height: 24px
        pointer-events: none
        font-family: Material-Symbols-Outlined-Regular, sans-serif
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24

    &:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
        content: "check_box_outline_blank"

    &:indeterminate ~ span.m3-checkbox-state::before
        content: "indeterminate_check_box"

    &:checked ~ span.m3-checkbox-state::before
        content: "check_box"
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24

    &:not(:disabled)
        &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
            & ~ span.m3.m3-checkbox-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)

        &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
            background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)

            & ~ span.m3-ripple-domain > .m3.ripple
                background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)

        &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)

        &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
            background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)

            & ~ span.m3-ripple-domain > .m3.ripple
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)

        &:hover
            & ~ span.m3-checkbox-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)

        &:active ~ span.m3.m3-checkbox-state-layer
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

            & ~ span.m3-ripple-domain > .m3.ripple
                background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)