@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)