zitadel/console/src/app/modules/info-section/info-section.component.scss

@use '@angular/material' as mat;

@mixin info-section-theme($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);

  .info-section-row {
    display: flex;
    border-radius: 4px;
    padding: 0.5rem 0;
    padding-right: 1rem;
    font-size: 14px;
    margin: 0.5rem 0;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);

    &.fit {
      width: fit-content;
    }

    .icon {
      margin-right: 1rem;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: 1.2rem;
      margin-left: 0.5rem;
      padding: 0.25rem 0;
    }

    .info-section-content {
      flex: 1;
      padding: 0.25rem 0;
    }

    &.info {
      background-color: map-get($background, infosection);
      color: map-get($foreground, infosection);

      .icon {
        color: map-get($foreground, infosection);
      }
    }

    &.success {
      background-color: map-get($background, successinfosection);
      color: map-get($foreground, successinfosection);

      .icon {
        color: map-get($foreground, successinfosection);
      }
    }

    &.warn {
      background-color: map-get($background, warninfosection);
      color: map-get($foreground, warninfosection);

      .icon {
        color: map-get($foreground, warninfosection);
      }
    }

    &.alert {
      background-color: map-get($background, alertinfosection);
      color: map-get($foreground, alertinfosection);

      .icon {
        color: map-get($foreground, alertinfosection);
      }
    }
  }
}