@mixin uxg-chart-typography($config) {
  .chart-font, .chart-font-axis, .chart-font-legend {
    font: {
      family: mat-font-family($config, body-1);
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    };
  }
}

@mixin uxg-chart-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $palette: (
    1: mat-color($primary, default),
    2: mat-color($accent, default),
    3: map-get($uxg-crimson, 500),
    4: map-get($uxg-grass, 100),
    5: map-get($uxg-amber, 100),
    6: map-get($uxg-gold, 100),
    7: map-get($uxg-ocean, 100),
    8: map-get($uxg-lime, 100)
  );

  .js-plotly-plot {
    .modebar-container .modebar.modebar--hover .modebar-group {
      background-color: map-get($background, 'background') !important;

      .modebar-btn {
        svg path {
          fill: map-get($foreground, text) !important;
        }
        &.active svg path {
          fill: map-get($primary, default) !important;
        }
      }
    }
  }

  .chart-font, .chart-font-axis, .chart-font-legend {
    color: map-get($foreground, text);
    background-color: map-get($background, 'background');
  }

  @each $level, $color in $palette {
    .palette-#{$level} {
      background-color: $color;
    }
  }
}