@use '@angular/material' as mat;
@use '@finastra/fds-theme/color' as fds;

@mixin theme($theme: null) {
  .uxg-expansion-filter.mat-expansion-panel {
    background: transparent;

    &:not([class*='mat-elevation-z']) {
      @include mat.elevation(0);
    }

    .mat-expansion-panel-header {
      @include fds.property(border-color, outline);
      @include fds.background(surface);
      @include fds.color(on-surface-medium);
    }

    &.active {
      .mat-expansion-panel-header {
        @include fds.property(border-color, primary);
      }
    }

    .mat-expansion-panel-content {
      .mat-expansion-panel-body {
        @include fds.background(surface);

        @include mat.elevation(2);
      }
    }
  }

  .mat-action-row {
    @include fds.background(background);
  }

  .uxg-contact {
    .uxg-contact-header {
      .mat-icon {
        @include fds.color(outline-info);
      }

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