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

@mixin uxg-badge-color($color-name) {
  $fds-color: $color-name;
  @if $color-name == 'warn' {
    $fds-color: 'warning';
  }
  @if $color-name == 'accent' {
    $fds-color: 'secondary';
  }
  &[matBadgeColor='#{$color-name}'],
  &.mat-badge-#{$color-name} {
    span.mat-badge-content {
      @include fds.property(background-color, #{$fds-color});
      @include fds.color(on-primary);
      border-style: none;
    }
  }
}

@mixin theme($theme: null) {
  .mat-badge {
    @include uxg-badge-color('secondary');
    @include uxg-badge-color('success');
    @include uxg-badge-color('error');
    @include uxg-badge-color('warn');
  }

  .uxg-side-badge.mat-badge-after {
    .mat-badge-content {
      background-color: transparent;
      @include fds.property(border-color, outline);
      @include fds.color(on-surface-medium);
    }

    @include uxg-badge-color('primary');
    @include uxg-badge-color('accent');
    @include uxg-badge-color('secondary');
    @include uxg-badge-color('success');
    @include uxg-badge-color('error');
    @include uxg-badge-color('warn');
  }
}

@mixin typography($config: null) {
  .uxg-side-badge {
    &.mat-badge-small.mat-badge-after {
      .mat-badge-content {
        @include typo.typography(body-4);
      }
    }

    &.mat-badge-medium.mat-badge-after {
      .mat-badge-content {
        @include typo.typography(body-3);
      }
    }

    &.mat-badge-large.mat-badge-after {
      .mat-badge-content {
        @include typo.typography(body-2);
        @include fds.property(font-weight, caption-font-weight);
      }
    }
  }
}