@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; } } }