// https://m3.material.io/components/cards/specs

.sd-card {
    // common
    border-radius: 12px;
    transition: all 0.2s;
    overflow: hidden;

    // elevated

    &-elevated {
        background: var(--md-sys-color-surface-container-low);
        @include elevation-level1;
        &:hover {
            @include elevation-level2;
        }
    }

    // filled

    &-filled {
        background: var(--md-sys-color-surface-container-highest);
        &:hover {
            @include elevation-level1;
        }
    }

    // outlined

    &-outlined {
        background: var(--md-sys-color-surface);
        outline: var(--md-sys-color-outline) 1px solid;
    }
}