@use 'sass:map';
@use 'node_modules/@angular/material/_index.scss' as mat;
@import 'node_modules/prismjs/themes/prism.css';
@import 'node_modules/highlight.js/scss/github.scss';

@include mat.core();

// Define a light theme
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$deep-purple-palette),
      accent: mat.define-palette(mat.$amber-palette),
    ),
    // Only include `typography` and `density` in the default dark theme.
    typography: mat.define-typography-config(),
    density: 0,
  )
);

// Define a dark theme
$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: mat.define-palette(mat.$deep-purple-palette, 300, 100, 500),
      accent: mat.define-palette(mat.$amber-palette),
    ),
  )
);

@mixin page-header-color($theme) {
  // Get the color config from the theme.
  $color-config: mat.get-color-config($theme);

  // Get the primary color palette from the color-config.
  $primary-palette: map.get($color-config, 'primary');

  .bd-pageheader {
    color: mat.get-color-from-palette($primary-palette, '500-contrast');
    background-image: linear-gradient(
      to bottom,
      mat.get-color-from-palette($primary-palette, 700) 0,
      mat.get-color-from-palette($primary-palette, 500) 100%
    );
  }
}

// Apply the light theme by default
@include mat.all-component-themes($light-theme);
@include page-header-color($light-theme);

// Apply the light theme only when the user prefers light themes.
.dark-theme {
  @include mat.all-component-colors($dark-theme);
  @include page-header-color($dark-theme);
  @import 'node_modules/highlight.js/scss/github-dark.scss';

  .hljs {
    background: transparent;
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

.button-row {
  padding: 0.5em 0;

  > button {
    margin-right: 8px;
  }
}

.hljs {
  background: transparent;
}

.container {
  max-width: 1170px;
  margin: auto;
  padding: 0 2em;
}

.text-center {
  text-align: center;
}

.bd-pageheader {
  padding-top: 1em;
  padding-bottom: 1em;
}
