@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/style/elevation';
@import '../core/typography/typography-utils';

@mixin mat-expansion-panel-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-expansion-panel {
    @include _mat-theme-overridable-elevation(2, $theme);
    background: mat-color($background, card);
    color: mat-color($foreground, text);
  }

  .mat-action-row {
    border-top-color: mat-color($foreground, divider);
  }

  .mat-expansion-panel {
    & .mat-expansion-panel-header.cdk-keyboard-focused,
    & .mat-expansion-panel-header.cdk-program-focused,
    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
      &:not([aria-disabled='true']) {
        background: mat-color($background, hover);
      }
    }
  }

  // Disable the hover on touch devices since it can appear like it is stuck. We can't use
  // `@media (hover)` above, because the desktop support browser support isn't great.
  @media (hover: none) {
    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
      .mat-expansion-panel-header:hover {
      background: mat-color($background, card);
    }
  }

  .mat-expansion-panel-header-title {
    color: mat-color($foreground, text);
  }

  .mat-expansion-panel-header-description,
  .mat-expansion-indicator::after {
    color: mat-color($foreground, secondary-text);
  }

  .mat-expansion-panel-header[aria-disabled='true'] {
    color: mat-color($foreground, disabled-button);

    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description {
      color: inherit;
    }
  }
}

@mixin mat-expansion-panel-typography($config) {
  .mat-expansion-panel-header {
    font: {
      family: mat-font-family($config, subheading-1);
      size: mat-font-size($config, subheading-1);
      weight: mat-font-weight($config, subheading-1);
    }
  }

  .mat-expansion-panel-content {
    @include mat-typography-level-to-styles($config, body-1);
  }
}