@use '@angular/material' as material;
@use 'node_modules/@angular/cdk/overlay';
@use 'node_modules/@angular/cdk/text-field';

@use 'sass:map';
@use './theme.scss';

@use '../sass/wdk-brand/wdk-theme/wdk-light-theme';
@use '../sass/wdk-brand/wdk-theme/wdk-typography';
@use '../src/lib/banner/banner-theme.component.scss' as banner;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

// TODO(v15): As of v15 material.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include material.legacy-typography-hierarchy(material.define-typography-config());`
//@include material.all-component-typographies();
@include material.core();

// Vars, Utilities, & Functions
@import './variables';

// Wdk Button styles
//@import './wdk-button';

// Vars, Utilities, & Functions
@import './globals';

@include material.typography-hierarchy(wdk-typography.$wdk-typography, "body");
@include theme.create-theme(wdk-light-theme.$wdk-theme);

//@debug $wdk-theme;

.wdk-theme {
  //@include material.checkbox-color(wdk-light-theme.$wdk-red-black-theme);
  //@include material.pseudo-checkbox-color(wdk-light-theme.$wdk-black-red-theme);
  //@include material.radio-color(wdk-light-theme.$wdk-red-black-theme);
  @include material.button-color(wdk-light-theme.$wdk-red-black-theme);
  //@include material.fab-color(wdk-light-theme.$wdk-red-black-theme);
  //@include material.icon-button-color(wdk-light-theme.$wdk-red-black-theme);
  //@include material.progress-spinner-color(wdk-light-theme.$wdk-red-black-theme);
  //@include material.option-color(wdk-light-theme.$wdk-black-red-theme);
  //@include material.stepper-color(wdk-light-theme.$wdk-red-black-teal-theme);
  @include  banner.theme(wdk-light-theme.$wdk-red-black-theme);
  //@import './wdk-base-design-tokens.css';
  @import './wdk-brand/wdk-base';
  @import './wdk-brand/wdk-variables';
  @import './wdk-brand/wdk-button';
  @import './wdk-brand/wdk-theme/custom-material/button';
  //@import './wdk-brand/wdk-theme/custom-material/card';
  //@import './wdk-brand/wdk-theme/custom-material/checkbox';
  //@import './wdk-brand/wdk-theme/custom-material/checkbox-group';
  //@import './wdk-brand/wdk-theme/custom-material/chips';
  //@import './wdk-brand/wdk-theme/custom-material/confirmation-dialog';
  //@import './wdk-brand/wdk-theme/custom-material/form-field';
  //@import './wdk-brand/wdk-theme/custom-material/icon';
  //@import './wdk-brand/wdk-theme/custom-material/label';
  //@import './wdk-brand/wdk-theme/custom-material/list';
  //@import './wdk-brand/wdk-theme/custom-material/option';
  //@import './wdk-brand/wdk-theme/custom-material/pseudo-checkbox';
  //@import './wdk-brand/wdk-theme/custom-material/radio-group';
  //@import './wdk-brand/wdk-theme/custom-material/select';
  //@import './wdk-brand/wdk-theme/custom-material/snack-bar';
  //@import './wdk-brand/wdk-theme/custom-material/table';
  //@import './wdk-brand/wdk-theme/custom-material/tab-group';
}

body, html {
  margin: 0;
  height: 100%;
}

router-outlet + * {
  flex: 1;
}

body {
  background-color: white;
  -webkit-font-smoothing: antialiased;
}