@import '~@angular/material/theming';

@include mat-core();



// Background palette for light themes.
$mat-swica-theme-background: (
  status-bar: map_get($mat-green, 300),
  app-bar:    map_get($mat-green, 600),
  background: map_get($mat-green, 300),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       rgb(102, 13, 13),
  dialog:     rgb(67, 94, 4),
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);


// Foreground palette for light themes.
$mat-swica-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);



// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-swica-theme($primary, $accent, $warn: mat-palette($mat-red)) {
    @return (
      primary: $primary,
      accent: $accent,
      warn: $warn,
      is-dark: false,
      foreground: $mat-swica-theme-foreground,
      background: $mat-swica-theme-background,
    );
  }


  
$candy-app-primary: mat-palette($mat-green);
$candy-app-accent:  mat-palette($mat-teal);
$candy-app-warn:    mat-palette($mat-red);


$candy-app-theme: mat-swica-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

.unicorn-swica-theme {
    @include angular-material-theme($candy-app-theme);
}




$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink);
$candy-app-warn:    mat-palette($mat-red);


$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

.unicorn-light-theme {
    @include angular-material-theme($candy-app-theme);
}

// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}


body {
    display: block;
    margin: 0 !important;
}