@import 'mixins/m3-mixins'

$padding: 16px

.m3:not(:first-child):is(.m3-card)
    padding: $padding

:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body).m3
    padding: $padding
    display: block
    box-sizing: border-box

.m3.m3-card-media
    &.m3-rounded
        border-radius: 12px

    width: 100%
    height: 100%
    display: block
    contain: content
    position: relative
    box-sizing: border-box

div.m3.m3-card-action-area
    display: block
    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
        top: 0
        width: 100%
        position: relative

    & > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
        top: 0
        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)