@import "mixins/m3-mixins"

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

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

input[type="checkbox"].m3.m3-checkbox
    appearance: none
    display: flex
    align-items: center
    justify-content: center
    box-sizing: content-box
    z-index: 10
    width: 1.125rem
    height: 1.125rem
    margin: 0
    outline-offset: -.14rem
    border-radius: .14rem
    outline: .14rem solid var(--md-sys-color-on-surface-variant)
    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

    &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
        outline-color: var(--md-sys-color-error)
        background-color: var(--md-sys-color-error)

    &:is(.m3.m3-error, :user-invalid)
        outline-color: var(--md-sys-color-error)

    &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
        outline-color: var(--md-sys-color-primary)
        background-color: var(--md-sys-color-primary)

    &:disabled
        &:is(:hover, &)
            opacity: 38%
            border: 2px solid var(--md-sys-color-on-surface)

        &:checked:is(:hover, &)
            opacity: 38%
            background-color: var(--md-sys-color-on-surface)

    &::after
        line-height: 1.125rem
        font-family: Material-Symbols-Outlined-Regular, sans-serif
        font-weight: 700
        font-size: 1.125rem
        color: var(--md-sys-color-on-primary)

    &:checked::after
        content: "done"

    &:indeterminate::after
        content: "check_indeterminate_small"

    &:hover
        outline-color: var(--md-sys-color-on-surface)

    &: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)