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

@mixin mat-accordion-override($theme) {
  $primary: map.get($theme, primary);
  $is-dark: map.get($theme, is-dark);

  $accentTextColor: colors.$light-primary-text;
  @if $is-dark {
    $accentTextColor: colors.$dark-primary-text;
  }

  $borderColor: black;
  @if $is-dark {
    $borderColor: white;
  }

  .mat-accordion {
    .mat-expansion-panel {
      .mat-expansion-panel-header {
        border: 2px solid transparent;
        .mat-expansion-panel-header-title {
          font-weight: bold;
          font-size: 18px;
        }

        &:hover,
        &:focus {
          background-color: map.get($primary, 50) !important;
        }

        &:focus {
          outline: none;
          border-color: map.get($primary, A400);
          border-width: 2px !important;
        }
      }

      .mat-expansion-panel-body {
        * {
          font-size: 14px;
          letter-spacing: normal;
        }
      }
    }

    &[color='accent'] {
      .mat-expansion-panel {
        background-color: map.get($primary, A400);
        color: $accentTextColor;

        .mat-expansion-panel-header {
          .mat-expansion-panel-header-title {
            color: $accentTextColor;
            font-weight: bold;
          }

          .mat-expansion-indicator {
            &::after {
              color: $accentTextColor;
            }
          }

          &:hover,
          &:focus {
            background-color: map.get($primary, A700) !important;
          }

          &:focus {
            border: $borderColor solid 2px !important;
          }
        }

        .mat-divider {
          background-color: map.get(colors.$mic-yellow, A400);
        }
      }
    }
  }
}
