@use 'sass:map';
@use '~@angular/material' as mat;

@mixin color($theme) {
  $config: mat.get-color-config($theme);
  $primary: map.get($config, 'primary');
  $accent: map.get($config, 'accent');
  $foreground: map.get($config, 'foreground');

  mtna-menu {
    &.mat-primary {
      @include _menu-palette($primary);
    }
    &.mat-accent {
      @include _menu-palette($accent);
    }
    .mat-list-item {
      border-color: transparent;
    }

    .mat-list-item,
    .mat-icon {
      color: mat.get-color-from-palette($foreground, 'text');
    }
  }
}

@mixin typography($theme) {
  $typography-config: mat.get-typography-config($theme);
  mtna-menu {
    .mat-list-item {
      @include mat.typography-level($typography-config, 'body-2');
    }
  }
}

@mixin theme($theme) {
  $config: mat.get-color-config($theme);
  @if $config != null {
    @include color($theme);
  }

  $typography-config: mat.get-typography-config($theme);
  @if $typography-config != null {
    @include typography($theme);
  }
}

@mixin _menu-palette($palette) {
  .mat-list-item.active {
    background-color: mat.get-color-from-palette($palette, default, 0.12);
    border-color: mat.get-color-from-palette($palette, default);

    .mat-icon,
    .mat-list-item {
      color: mat.get-contrast-color-from-palette($palette, default);
    }
  }
}