zitadel/console/src/app/modules/card/card.scss

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

@mixin card-theme($theme) {
/* stylelint-disable */
  $primary: map-get($theme, primary);
  $primary-color: mat-color($primary, 500);
  $primary-dark: mat-color($primary, A800);
  $border-color: mat-color($primary, A700);
  $border-selected-color: mat-color($primary, A600);
/* stylelint-enable */

  .card {
    background-color: $primary-dark;
    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
    border: 1px solid rgba($border-color, .2);
    box-sizing: border-box;
    border-radius: .5rem;
    outline: none;
    height: 100%;

    .selection-icon {
      opacity: 0;
      position: absolute;
      top: -12px;
      left: -12px;
      color: $border-color;
    }

    &.selected {
      background-color: #ffffff25;
      border: 1px solid $border-selected-color;

      .text-part {
        .icons {
          opacity: 1;
        }
      }

      .selection-icon {
        color: $border-selected-color;
        opacity: 1;
      }
    }

    .iamuser {
      color: $primary-color;
    }

    .edit-button {
      &:hover {
        color: $border-selected-color;
      }
    }
  }
}