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

@use '@angular/material' as mat;

@mixin card-theme($theme) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $background: map-get($theme, background);
  $card-background-color: mat.get-color-from-palette($background, card);
  $is-dark-theme: map-get($theme, is-dark);
  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
  $border-selected-color: if($is-dark-theme, #ffffff, #000000);
  /* stylelint-enable */

  .card {
    background-color: $card-background-color;
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    border: 1px solid $border-color;
    box-sizing: border-box;
    border-radius: 0.5rem;
    outline: none;
    height: 100%;

    &.warn {
      border-color: var(--warn);
    }

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