// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use 'sass:map';
@use '@angular/material' as mat;
@use '@ng-doc/app/styles/themes/dark.css';
@use 'projects/mat-timepicker' as mat-timepicker;

@use './styles/theme';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@mixin components-theme($theme) {
  @include mat.core-theme($theme);
  @include mat.toolbar-theme($theme);
  @include mat.form-field-theme($theme);
  @include mat.input-theme($theme);
  @include mat.button-theme($theme);
  @include mat.fab-theme($theme);
  @include mat.icon-button-theme($theme);
  @include mat.divider-theme($theme);
  @include mat.card-theme($theme);
  @include mat-timepicker.timepicker-theme($theme);
}

@mixin components-color($theme) {
  @include mat.core-color($theme);
  @include mat.toolbar-color($theme);
  @include mat.form-field-color($theme);
  @include mat.input-color($theme);
  @include mat.button-color($theme);
  @include mat.fab-color($theme);
  @include mat.icon-button-color($theme);
  @include mat.divider-color($theme);
  @include mat.card-color($theme);
  @include mat-timepicker.timepicker-color($theme);
}

:root {
  &:not(.m2) {
    @include components-theme(theme.$ngx-mat-timepicker-theme);
    @include mat.color-variants-backwards-compatibility(theme.$ngx-mat-timepicker-theme);
  }

  &.m2 {
    @include components-theme(theme.$ngx-mat-timepicker-theme-m2);
  }

  &[data-theme='dark'] {
    &:not(.m2) {
      @include components-color(theme.$ngx-mat-timepicker-theme-dark);
      @include mat.color-variants-backwards-compatibility(theme.$ngx-mat-timepicker-theme-dark);
    }

    &.m2 {
      @include components-color(theme.$ngx-mat-timepicker-theme-m2-dark);
    }
  }
}

/* You can add global styles to this file, and also import other style files */

// html {
//   @include mat.theme(
//     (
//       color: (
//         primary: mat.$violet-palette,
//         tertiary: mat.$orange-palette,
//         theme-type: light,
//       ),
//       typography: Roboto,
//       density: 0,
//     )
//   );
// }

html,
body {
  height: 100%;
}

body {
  margin: 0;
}
