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

@mixin theme($theme: null) {
  uxg-filter-group {
    .uxg-group-filter {
      display: flex;
      .mat-badge-content {
        color: var(--fds-primary) !important;
        background-color: var(--fds-surface-selected) !important;
        border-color: var(--fds-primary) !important;
      }
    }

    .uxg-expansion-filter {
      .expand-button {
        @include fds.background(surface-selected);
      }

      .filter-value {
        @include fds.color(primary);
      }
    }

    .expansion-panel-header,
    .filter-group-dialog-header {
      @include fds.background(outline);
    }
  }
}

@mixin typography($config: null) {
  uxg-filter-group {
    .mat-expansion-panel-header {
      .uxg-filter-group-header {
        .selectedFilters {
          @include typo.typography(subtitle-3);
        }
      }
    }
  }
}