:host {
  display: block;

  a,
  button {
    &.special {
      background: linear-gradient(45deg, var(--oc-pink-5), var(--oc-violet-5));
      color: #fff;
    }
  }

  .mat-mdc-card {
    --gradient-opacity: 50%;
    --mat-card-outlined-outline-color: rgb(193, 219, 254);

    background-color: white;
    background-image: linear-gradient(
      109.6deg,
      color-mix(in srgb, rgba(255, 255, 255, 1) 100%, transparent) 11.2%,
      color-mix(
          in srgb,
          rgba(221, 108, 241, 0.26) var(--gradient-opacity),
          transparent
        )
        42%,
      color-mix(
          in srgb,
          rgba(229, 106, 253, 0.71) var(--gradient-opacity),
          transparent
        )
        71.5%,
      color-mix(
          in srgb,
          rgba(123, 183, 253, 1) var(--gradient-opacity),
          transparent
        )
        100%
    );
    color: rgb(var(--dark-primary-text));

    .mat-mdc-card-actions {
      min-height: 0;
    }
  }

  .mat-mdc-progress-bar {
    --mat-progress-bar-active-indicator-height: 0.5rem;
    --mat-progress-bar-track-height: 0.5rem;
    border-radius: 0.25rem;

    ::ng-deep {
      .mdc-linear-progress__buffer-bar {
        background-color: rgb(var(--palette-background-unselected-chip));
      }
    }
  }
}

:host-context(.theme-dark) {
  .mat-mdc-card {
    --mat-card-outlined-outline-color: white;
  }
}