@import "mixins/m3-mixins"

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

input[type="radio"].m3.m3-radio
    appearance: none
    display: flex
    align-items: center
    justify-content: center
    z-index: 10
    width: 20px
    margin: 0
    aspect-ratio: inherit
    border-radius: 50%
    border: 2px solid var(--md-sys-color-on-surface-variant)
    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

    &::after
        content: ""
        width: 10px
        aspect-ratio: 1
        border-radius: 50%

    &:disabled
        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)

    &:checked
        border: 2px solid var(--md-sys-color-primary)

    &:checked::after
        background-color: var(--md-sys-color-primary)

    &:checked:disabled
        border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)

    &:checked:disabled::after
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)

    &:not(:disabled)

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

        &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-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.m3-radio-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)

        &:active + span.m3.m3-radio-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)