@use "sass:map";
@import '~@angular/material/theming';

/** Include the core Angular Material styles */
@include mat-core();

/** Configure the Angular Material typography */
@include angular-material-typography(
        mat-typography-config(
            $font-family: theme('fontFamily.sans'),
            $title: mat-typography-level(1.25rem, 2rem, 600),
            $body-2: mat-typography-level(0.875rem, 1.5rem, 600),
            $button: mat-typography-level(0.875rem, 0.875rem, 500),
            $input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
        )
);

/** Configure the Angular Material density **/
@include angular-material-density(-2);

/** Prepare the Background and Foreground maps */
$background-light: (
    status-bar: #CBD5E1, /* blueGray.300 */
    app-bar: #FFFFFF,
    background: #F1F5F9, /* blueGray.100 */
    hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
    card: #FFFFFF,
    dialog: #FFFFFF,
    disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
    raised-button: #FFFFFF,
    focused-button: #64748B, /* blueGray.500 */
    selected-button: #E2E8F0, /* blueGray.200 */
    selected-disabled-button: #E2E8F0, /* blueGray.200 */
    disabled-button-toggle: #CBD5E1, /* blueGray.300 */
    unselected-chip: #E2E8F0, /* blueGray.200 */
    disabled-list-option: #CBD5E1, /* blueGray.300 */
    tooltip: #1E293B /* blueGray.800 */
);

$background-dark: (
    status-bar: #0F172A, /* blueGray.900 */
    app-bar: #0F172A, /* blueGray.900 */
    background: #0F172A, /* blueGray.900 */
    hover: rgba(255, 255, 255, 0.05),
    card: #1E293B, /* blueGray.800 */
    dialog: #1E293B, /* blueGray.800 */
    disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
    raised-button: #0F172A, /* blueGray.900 */
    focused-button: #E2E8F0, /* blueGray.200 */
    selected-button: rgba(255, 255, 255, 0.05),
    selected-disabled-button: #1E293B, /* blueGray.800 */
    disabled-button-toggle: #0F172A, /* blueGray.900 */
    unselected-chip: #475569, /* blueGray.600 */
    disabled-list-option: #E2E8F0, /* blueGray.200 */
    tooltip: #64748B /* blueGray.500 */
);

$foreground-light: (
    base: #000000,
    divider: #E2E8F0, /* blueGray.200 */
    dividers: #E2E8F0, /* blueGray.200 */
    disabled: #94A3B8, /* blueGray.400 */
    disabled-button: #94A3B8, /* blueGray.400 */
    disabled-text: #94A3B8, /* blueGray.400 */
    elevation: #000000,
    hint-text: #94A3B8, /* blueGray.400 */
    secondary-text: #64748B, /* blueGray.500 */
    icon: #64748B, /* blueGray.500 */
    icons: #64748B, /* blueGray.500 */
    mat-icon: #64748B, /* blueGray.500 */
    text: #1E293B, /* blueGray.800 */
    slider-min: #1E293B, /* blueGray.800 */
    slider-off: #CBD5E1, /* blueGray.300 */
    slider-off-active: #94A3B8 /* blueGray.400 */
);

$foreground-dark: (
    base: #FFFFFF,
    divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
    dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
    disabled: #475569, /* blueGray.600 */
    disabled-button: #1E293B, /* blueGray.800 */
    disabled-text: #475569, /* blueGray.600 */
    elevation: #000000,
    hint-text: #64748B, /* blueGray.500 */
    secondary-text: #94A3B8, /* blueGray.400 */
    icon: #F1F5F9, /* blueGray.100 */
    icons: #F1F5F9, /* blueGray.100 */
    mat-icon: #94A3B8, /* blueGray.400 */
    text: #FFFFFF,
    slider-min: #FFFFFF,
    slider-off: #64748B, /* blueGray.500 */
    slider-off-active: #94A3B8 /* blueGray.400 */
);

/** Generate Primary, Accent and Warn palettes */
$palettes: ();
@each $name in (primary, accent, warn) {
    $palettes: map.merge($palettes, (#{$name}: (
        50: var(--fuse-#{$name}-50),
        100: var(--fuse-#{$name}-100),
        200: var(--fuse-#{$name}-200),
        300: var(--fuse-#{$name}-300),
        400: var(--fuse-#{$name}-400),
        500: var(--fuse-#{$name}-500),
        600: var(--fuse-#{$name}-600),
        700: var(--fuse-#{$name}-700),
        800: var(--fuse-#{$name}-800),
        900: var(--fuse-#{$name}-900),
        contrast: (
            50: var(--fuse-on-#{$name}-50),
            100: var(--fuse-on-#{$name}-100),
            200: var(--fuse-on-#{$name}-200),
            300: var(--fuse-on-#{$name}-300),
            400: var(--fuse-on-#{$name}-400),
            500: var(--fuse-on-#{$name}-500),
            600: var(--fuse-on-#{$name}-600),
            700: var(--fuse-on-#{$name}-700),
            800: var(--fuse-on-#{$name}-800),
            900: var(--fuse-on-#{$name}-900)
        ),
        default: var(--fuse-#{$name}),
        lighter: var(--fuse-#{$name}-100),
        darker: var(--fuse-#{$name}-700),
        text: var(--fuse-#{$name}),
        default-contrast: var(--fuse-on-#{$name}),
        lighter-contrast: var(--fuse-on-#{$name}-100),
        darker-contrast: var(--fuse-on-#{$name}-700)
    )));
}

/** Generate Angular Material themes. Since we are using CSS Custom Properties,
    we don't have to generate a separate Angular Material theme for each color
    set. We can just create one light and one dark theme and then switch the
    CSS Custom Properties to dynamically switch the colors. */
body.light,
body .light {
    $base-light-theme: mat-light-theme((
        color: ($palettes)
    ));

    $light-theme: (
        color: (
            primary: map.get(map.get($base-light-theme, color), primary),
            accent: map.get(map.get($base-light-theme, color), accent),
            warn: map.get(map.get($base-light-theme, color), warn),
            is-dark: map.get(map.get($base-light-theme, color), is-dark),
            foreground: $foreground-light,
            background: $background-light
        ),
        typography: null,
        density: null,
        primary: map.get(map.get($base-light-theme, color), primary),
        accent: map.get(map.get($base-light-theme, color), accent),
        warn: map.get(map.get($base-light-theme, color), warn),
        is-dark: map.get(map.get($base-light-theme, color), is-dark),
        foreground: $foreground-light,
        background: $background-light
    );

    @include angular-material-theme($light-theme);
}

body.dark,
body .dark {
    $base-dark-theme: mat-dark-theme((
        color: ($palettes)
    ));

    $dark-theme: (
        color: (
            primary: map.get(map.get($base-dark-theme, color), primary),
            accent: map.get(map.get($base-dark-theme, color), accent),
            warn: map.get(map.get($base-dark-theme, color), warn),
            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
            foreground: $foreground-dark,
            background: $background-dark
        ),
        typography: null,
        density: null,
        primary: map.get(map.get($base-dark-theme, color), primary),
        accent: map.get(map.get($base-dark-theme, color), accent),
        warn: map.get(map.get($base-dark-theme, color), warn),
        is-dark: map.get(map.get($base-dark-theme, color), is-dark),
        foreground: $foreground-dark,
        background: $background-dark
    );

    @include angular-material-theme($dark-theme);
}