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

@mixin theme($theme: null) {
  .mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
    .mat-button-toggle {
      @include fds.color(on-surface-medium);
      @include fds.property(border-color, outline);
      @include fds.background(surface);

      .mat-button-toggle-button {
        border-color: transparent;
      }

      &.mat-button-toggle-disabled {
        @include fds.color(on-surface-disabled);
      }

      &.mat-button-toggle-checked {
        @include fds.background(background);

        .mat-button-toggle-button {
          @include fds.background(surface-selected);
          @include fds.property(border-color, primary);
        }

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

        &.mat-button-toggle-disabled {
          opacity: 60%;
        }
      }
    }
  }

  .uxg-filtering-toggle-group.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
    .mat-button-toggle {
      @include fds.property(border-color, outline);

      .mat-button-toggle-button {
        border-color: transparent;
      }

      &.mat-button-toggle-checked {
        @include fds.property(border-color, primary);
      }
    }
  }
}

@mixin typography($config: null) {
  $mat-typo-config: mat.m2-define-typography-config();

  .mat-button-toggle-group {
    .mat-button-toggle {
      .mat-button-toggle-label-content {
        @include typo.typography(subtitle-2);
        line-height: mat.m2-line-height($mat-typo-config, button);
      }
    }

    &[dense] {
      .mat-button-toggle {
        .mat-button-toggle-label-content {
          @include typo.typography(subtitle-3);
        }
      }
    }
  }

  .uxg-filtering-toggle-group.mat-button-toggle-group {
    .mat-button-toggle {
      .mat-button-toggle-label-content {
        @include typo.typography(body-2);
      }
    }
  }
}