$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);

$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);

$mat-grey: (
    50: #fafafa,
    100: #f5f5f5,
    200: #eeeeee,
    300: #e0e0e0,
    400: #bdbdbd,
    500: #9e9e9e,
    600: #757575,
    700: #616161,
    800: #424242,
    900: #212121,
    A100: #ffffff,
    A200: #eeeeee,
    A400: #bdbdbd,
    A700: #616161,
    contrast: (
        50: $dark-primary-text,
        100: $dark-primary-text,
        200: $dark-primary-text,
        300: $dark-primary-text,
        400: $dark-primary-text,
        500: $dark-primary-text,
        600: $light-primary-text,
        700: $light-primary-text,
        800: $light-primary-text,
        900: $light-primary-text,
        A100: $dark-primary-text,
        A200: $dark-primary-text,
        A400: $dark-primary-text,
        A700: $light-primary-text,
    ),
);

// Background palette for dark themes.
// $custom-mat-dark-theme-background: (
//   status-bar: black,
//   app-bar: map_get($mat-grey, 900),
//   background: #303030,
//   hover: rgba(white, 0.04),
//   card: map_get($mat-grey, 800),
//   dialog: map_get($mat-grey, 800),
//   disabled-button: rgba(white, 0.12),
//   raised-button: map-get($mat-grey, 800),
//   focused-button: $light-focused,
//   selected-button: map_get($mat-grey, 900),
//   selected-disabled-button: map_get($mat-grey, 800),
//   disabled-button-toggle: black,
//   unselected-chip: map_get($mat-grey, 700),
//   disabled-list-option: black
// );
$custom-mat-dark-theme-background: (
    status-bar: black,
    app-bar: map_get($mat-grey, 900),
    background: var(--theme-primary-background),
    hover: rgba(white, 0.06),
    card: var(--theme-secondary-background),
    dialog: var(--theme-secondary-background),
    disabled-button: rgba(white, 0.12),
    raised-button: map-get($mat-grey, 800),
    focused-button: $light-focused,
    selected-button: map_get($mat-grey, 900),
    selected-disabled-button: map_get($mat-grey, 800),
    disabled-button-toggle: black,
    unselected-chip: map_get($mat-grey, 700),
    disabled-list-option: black,
);

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

// Background palette for light themes.
// $custom-mat-light-theme-background: (
//   status-bar: map_get($mat-grey, 300),
//   app-bar:    map_get($mat-grey, 100),
//   background: map_get($mat-grey, 50),
//   hover:      rgba(black, 0.04),
//   card:       white,
//   dialog:     white,
//   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),
// );
$custom-mat-light-theme-background: (
    status-bar: map_get($mat-grey, 300),
    app-bar: map_get($mat-grey, 100),
    background: var(--theme-primary-background),
    hover: rgba(black, 0.06),
    card: var(--theme-secondary-background),
    dialog: var(--theme-secondary-background),
    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.
$custom-mat-light-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),
);

@function custom-mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
    @return (
        primary: $primary,
        accent: $accent,
        warn: $warn,
        is-dark: false,
        foreground: $custom-mat-light-theme-foreground,
        background: $custom-mat-light-theme-background
    );
}

@function custom-mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {
    @return (
        primary: $primary,
        accent: $accent,
        warn: $warn,
        is-dark: true,
        foreground: $custom-mat-dark-theme-foreground,
        background: $custom-mat-dark-theme-background
    );
}
