@use 'sass:map';
@use '../base/colors';
@use '../base/elevation';
@use '../base/opacity';
@use '../base/typography';

@mixin mx-menu-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;
    .mat-mdc-menu-panel.mat-mdc-menu-panel,
    .mat-mdc-menu-panel.mat-mdc-menu-panel.mat-mdc-elevation-specific,
    .mdc-menu-surface[class^='mat-mdc-'] {
      @extend .gl-el-2;
    }
  } @else {
    .mat-mdc-menu-panel.mat-mdc-menu-panel,
    .mat-mdc-menu-panel.mat-mdc-menu-panel.mat-mdc-elevation-specific,
    .mdc-menu-surface[class^='mat-mdc-'] {
      @extend .gl-dark-el-2;
    }
  }

  .mat-mdc-menu-panel.mat-mdc-menu-panel,
  .mdc-menu-surface.mdc-menu-surface,
  .mdc-menu-surface[class^='mat-mdc-'] {
    background-color: map.get($current-theme, surfaceContainer);
    color: map.get($current-theme, onSurface);
  }
  .mat-mdc-menu-item:hover:not([disabled]),
  .mat-mdc-menu-item.cdk-program-focused:not([disabled]),
  .mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),
  .mat-mdc-menu-item-highlighted:not([disabled]),
  .mat-mdc-option:hover:not(.mdc-list-item--disabled),
  .mat-mdc-option:focus.mdc-list-item,
  .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
    background-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-8);
  }
  .mat-ripple.mat-mdc-menu-ripple,
  .mat-ripple.mat-mdc-option-ripple {
    .mat-ripple-element {
      background-color: map.get($current-theme, onSurface);
      opacity: 0.04; // .12 - .08
    }
  }

  .mat-mdc-option {
    &,
    .mdc-list-item__primary-text.mdc-list-item__primary-text {
      @extend .gl-body-lg;
      color: map.get($current-theme, onSurface);
    }
  }

  .mat-mdc-menu-item .mat-icon-no-color,
  .mat-mdc-menu-submenu-icon {
    color: map.get($current-theme, onSurfaceVariant);
  }
}

.mat-mdc-menu-panel {
  .mat-divider {
    margin: 8px 0 !important;
  }

  .mat-mdc-menu-content,
  .mat-mdc-menu-item .mat-mdc-menu-item-text,
  .mat-mdc-slide-toggle .mdc-form-field .mdc-label {
    @extend .gl-body-lg;
  }
}