@import 'mixins/m3-mixins'

div.m3.m3-card-action-area
    width: 100%
    height: 100%
    cursor: pointer
    contain: content
    position: relative
    border-radius: inherit
    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)

    & > div.m3.m3-card-action-area-content
        position: absolute

    & > span.m3.m3-card-state-layer
        width: 100%
        height: 100%
        position: absolute
        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)

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

    &:is(&:focus, &:focus-visible, &:focus-within)
        & > span.m3.m3-card-state-layer
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

    &:is(&:focus, &:focus-visible, &:focus-within, &:hover)
        &:is(.m3-card-outlined, .m3-card-filled)
            @include elevation-1(false)

        &.m3-card-elevated
            @include elevation-2(false)

    &:active
        &:is(.m3-card-outlined, .m3-card-filled)
            @include elevation-0(true)

        &.m3-card-elevated
            @include elevation-1(true)

        &:not(&:has(span.m3.m3-ripple-domain))
            & > span.m3.m3-card-state-layer
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

        & > span.m3.m3-card-state-layer
            background-color: transparent

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