@import '../css/colors-variables'

div.m3.m3-radio-container
    @include center(inline-flex)

    width: 20px
    height: 20px

    & + label.m3.m3-radio-label
        margin-inline: 3px

    & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
        z-index: 5
        width: 40px
        height: 40px
        aspect-ratio: 1

    & > span.m3.m3-radio-state-layer
        border-radius: 50%
        position: absolute
        pointer-events: none
        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

    & > input[type="radio"].m3.m3-radio
        margin: 0
        width: 20px
        height: 20px
        aspect-ratio: 1
        cursor: pointer
        appearance: none
        position: absolute

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

            &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
                background-color: color-mix(in srgb, $primary 12%, transparent)

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

            &:hover
                & + span.m3.m3-radio-state-layer
                    background-color: color-mix(in srgb, $on-surface 8%, transparent)

            &:active + span.m3.m3-radio-state-layer
                background-color: color-mix(in srgb, $on-surface 12%, transparent)

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

        &:disabled
            &:is(:not(:checked), &:checked) ~ svg
                & > circle.m3-radio-outline
                    stroke-opacity: 38%
                    stroke: $on-surface

            &:checked ~ svg > circle.m3-radio-state
                fill-opacity: 38%
                fill: $on-surface

        &:not(:checked) ~ svg
            & > circle.m3-radio-outline
                stroke: $on-surface-variant

            & > circle.m3-radio-state
                fill: $primary
                fill-opacity: 0

        &:checked ~ svg
            & > circle.m3-radio-outline
                stroke: $primary

            & > circle.m3-radio-state
                fill: $primary
                fill-opacity: 1

    svg
        margin: 0
        width: 20px
        z-index: 10
        border-radius: 50%
        pointer-events: none
        aspect-ratio: inherit

        & > circle
            transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)

            &.m3-radio-outline
                r: 9px
                fill: black
                fill-opacity: 0
                stroke-width: 2px
                stroke: $on-surface-variant

            &.m3-radio-state
                r: 5px