zitadel/console/src/styles/morph-card.scss

@import '~@angular/material/theming';

@mixin morph-card-theme($theme) {
    $accent: map-get($theme, accent);
    $background: map-get($theme, background);
    $background-color: mat-color($background, card);
    $primary: map-get($theme, primary);
    $primary-dark: mat-color($primary, A900);
    $secondary-dark: mat-color($primary, A800);
    $accent: map-get($theme, accent);
    $accent-color: mat-color($accent, 500);

    .morph-card {
        cursor: pointer;
        animation: all .2s;
        height: 80px;
        width: 80px;
        margin: 1rem;
        border-radius: 16px;
        border: 1px solid $accent-color;
        background-color: $primary-dark;
        transition: background-color .5s ease-in-out;


        &.add {
            background: $accent-color;
        }
    }
}