material-you-react/src/styles/card.sass

@import 'mixins/m3-mixins'

$padding: 16px

@function padding-calculating($has-padding)
    @if $has-padding == true
        @return $padding
    @else
        @return 0px

div.m3.m3-card
    & > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
    & > .m3-card-media:first-child,
    & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
        padding: padding-calculating(false)
        border-radius: 12px !important

div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
    padding: padding-calculating(false)
    border-radius: 12px !important

div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
    padding: padding-calculating(true)
    display: block
    box-sizing: border-box

.m3.m3-card-media
    &.m3-rounded
        border-radius: 12px + padding-calculating(true)

    width: 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-ripple-domain > .m3.ripple
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)