/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;

@include mat.core();

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

// Define a light theme
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
  )
);

// Apply the dark theme by default
@include mat.core-theme($dark-theme);
@include mat.all-component-themes($dark-theme);

// Apply the light theme only when the user prefers light themes.
@media (prefers-color-scheme: light) {
  // Use the `-color` mixins to only apply color styles without reapplying the same
  // typography and density styles.
  @include mat.core-color($light-theme);
  @include mat.all-component-themes($light-theme);
}

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

.mat-bottom-sheet-container {
  padding: 0 !important;
}
.mdc-list-item--with-leading-avatar .mdc-list-item__start {
  border-radius: 0 !important;
}
