@use '@angular/material' as mat;
@use '@igo2/sdg-core' as sdg;

@use './overrides';

@mixin theme($theme, $definedTheme, $name) {
  --sdg-font-size-root-percent: 87.5%;
  --igo-font-family-text: var(--sdg-font-family-text, ('Roboto', sans-serif));

  @include sdg.system-tokens();

  @include customCss();

  @include mat.theme($theme);

  @include mat.color-variants-backwards-compatibility($definedTheme);

  @include overrides.overrides();
}

@mixin customCss() {
  .igo-collapsed {
    display: none !important;
  }

  mat-icon[igocollapse] {
    &:hover {
      cursor: pointer;
    }

    &.igo-chevron {
      width: auto !important;
      transform: rotateZ(0deg);
      transition: 300ms ease-in-out;

      &.collapsed {
        transform: rotateZ(180deg);
        transition: 300ms ease-in-out;
      }
    }
  }

  .toastr-message-title {
    font-size: var(--sdg-font-size-h5);
  }
}