:host {
  display: block;

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

  .mat-mdc-card {
    --mat-card-outlined-container-color: whitesmoke;

    .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-container-color: #222222;
  }
}
