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

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

    // elevated

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

    // filled

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

    // outlined

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