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

@mixin mx-expansion-panel-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  mat-expansion-panel.mat-expansion-panel {
    &:not([class*='mat-elevation-z']) {
      @extend .gl-el-2;
      box-shadow: none;
      border: 1px solid map.get($color-theme, outlineVariant);
    }
    background-color: map.get($color-theme, surface);

    &:hover {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
    }

    .mat-expansion-panel-header-title {
      @extend .gl-title-sm;
      color: map.get($color-theme, onSurface);
    }

    .mat-expansion-panel-header-description {
      @extend .gl-label-md;
      color: map.get($color-theme, onSurfaceVariant);
    }

    .mat-expansion-panel-header[aria-disabled='true'] {
      .mat-expansion-panel-header-title {
        color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
      }

      .mat-expansion-panel-header-description {
        color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
      }
    }

    &:not(.mat-expansion-panel-spacing) + mat-expansion-panel:not(.mat-expansion-panel-spacing) {
      border-top: 0;
    }
  }
}