@use '@finastra/fds-theme/color' as fds;

@mixin theme($theme: null) {
  .mat-icon[color='secondary'],
  .mat-icon.mat-secondary {
    @include fds.color(secondary);
  }

  .mat-icon[color='success'],
  .mat-icon.mat-success {
    @include fds.color(success);
  }

  .mat-icon[color='error'],
  .mat-icon.mat-error {
    @include fds.color(error);
  }

  .mat-icon[color='gradient'],
  .mat-icon.mat-gradient {
    @include fds.background(gradient-vertical);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .uxg-icon-category {
    @include fds.background(surface-selected);

    .mat-icon {
      @include fds.color(primary);
    }
  }
}