/*!
 *  Licensed to the Apache Software Foundation (ASF) under one or more
 *  contributor license agreements.  See the NOTICE file distributed with
 *  this work for additional information regarding copyright ownership.
 *  The ASF licenses this file to You under the Apache License, Version 2.0
 *  (the "License"); you may not use this file except in compliance with
 *  the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@use 'sass:map';
@use '@angular/material' as mat;

@layer base {
    //fonts are loaded by the browser
    @font-face {
        font-family: Comic Sans MS;
    }
}

:root {
    --md-ref-palette-error-0: #000000; /* Error 0 */
    --md-ref-palette-error-10: #000000; /* Error 10 */
    --md-ref-palette-error-20: #000000; /* Error 20 */
    --md-ref-palette-error-25: #a8372a; /* Error 25 */
    --md-ref-palette-error-30: #ba554a; /* Error 30 */
    --md-ref-palette-error-35: #ba554a; /* Error 35 */
    --md-ref-palette-error-40: #ba554a; /* Error 40 */
    --md-ref-palette-error-50: #eb7071; /* Error 50 */
    --md-ref-palette-error-60: #eb7071; /* Error 60 */
    --md-ref-palette-error-70: #eb7071; /* Error 70 */
    --md-ref-palette-error-80: #eb7071; /* Error 80 */
    --md-ref-palette-error-90: #f49999; /* Error 90 */
    --md-ref-palette-error-95: #f49999; /* Error 95 */
    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
    --md-ref-palette-error-100: #ffffff; /* Error 100 */
    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
    --md-ref-palette-tertiary-10: #004d40; /* Tertiary 10 */
    --md-ref-palette-tertiary-20: #00695c; /* Tertiary 20 */
    --md-ref-palette-tertiary-25: #00796b; /* Tertiary 25 */
    --md-ref-palette-tertiary-30: #00897b; /* Tertiary 30 */
    --md-ref-palette-tertiary-35: #009688; /* Tertiary 35 */
    --md-ref-palette-tertiary-40: #26a69a; /* Tertiary 40 */
    --md-ref-palette-tertiary-50: #4db6ac; /* Tertiary 50 */
    --md-ref-palette-tertiary-60: #80cbc4; /* Tertiary 60 */
    --md-ref-palette-tertiary-70: #b2dfdb; /* Tertiary 70 */
    --md-ref-palette-tertiary-80: #e0f2f1; /* Tertiary 80 */
    --md-ref-palette-tertiary-90: #e0f2f1; /* Tertiary 90 */
    --md-ref-palette-tertiary-95: #e0f2f1; /* Tertiary 95 */
    --md-ref-palette-tertiary-98: #e0f2f1; /* Tertiary 98 */
    --md-ref-palette-tertiary-99: #e0f2f1; /* Tertiary 99 */
    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
    --md-ref-palette-secondary-10: #311b92; /* Secondary 10 */
    --md-ref-palette-secondary-20: #4527a0; /* Secondary 20 */
    --md-ref-palette-secondary-25: #512da8; /* Secondary 25 */
    --md-ref-palette-secondary-30: #5e35b1; /* Secondary 30 */
    --md-ref-palette-secondary-35: #673ab7; /* Secondary 35 */
    --md-ref-palette-secondary-40: #7e57c2; /* Secondary 40 */
    --md-ref-palette-secondary-50: #9575cd; /* Secondary 50 */
    --md-ref-palette-secondary-60: #b39ddb; /* Secondary 60 */
    --md-ref-palette-secondary-70: #d1c4e9; /* Secondary 70 */
    --md-ref-palette-secondary-80: #ede7f6; /* Secondary 80 */
    --md-ref-palette-secondary-90: #ede7f6; /* Secondary 90 */
    --md-ref-palette-secondary-95: #ede7f6; /* Secondary 95 */
    --md-ref-palette-secondary-98: #ede7f6; /* Secondary 98 */
    --md-ref-palette-secondary-99: #ede7f6; /* Secondary 99 */
    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
    --md-ref-palette-primary-0: #000000; /* Primary 0 */
    --md-ref-palette-primary-10: #311b92; /* Primary 10 */
    --md-ref-palette-primary-20: #4527a0; /* Primary 20 */
    --md-ref-palette-primary-25: #512da8; /* Primary 25 */
    --md-ref-palette-primary-30: #5e35b1; /* Primary 30 */
    --md-ref-palette-primary-35: #673ab7; /* Primary 35 */
    --md-ref-palette-primary-40: #7e57c2; /* Primary 40 */
    --md-ref-palette-primary-50: #9575cd; /* Primary 50 */
    --md-ref-palette-primary-60: #b39ddb; /* Primary 60 */
    --md-ref-palette-primary-70: #d1c4e9; /* Primary 70 */
    --md-ref-palette-primary-80: #ede7f6; /* Primary 80 */
    --md-ref-palette-primary-90: #ede7f6; /* Primary 90 */
    --md-ref-palette-primary-95: #ede7f6; /* Primary 95 */
    --md-ref-palette-primary-98: #ede7f6; /* Primary 98 */
    --md-ref-palette-primary-99: #ede7f6; /* Primary 99 */
    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
    --md-ref-palette-neutral-variant-40: #acacac; /* Neutral Variant 40 */
    --md-ref-palette-neutral-variant-50: #d8d8d8; /* Neutral Variant 50 */
    --md-ref-palette-neutral-variant-60: #d8d8d8; /* Neutral Variant 60 */
    --md-ref-palette-neutral-variant-70: #d8d8d8; /* Neutral Variant 70 */
    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
    --md-ref-palette-neutral-4: #121212; /* Neutral 4 */
    --md-ref-palette-neutral-6: #121212; /* Neutral 6 */
    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
    --md-ref-palette-neutral-12: #303030; /* Neutral 12 */
    --md-ref-palette-neutral-17: #303030; /* Neutral 17 */
    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
    --md-ref-palette-neutral-70: #d8d8d8; /* Neutral 70 */
    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
    --md-ref-palette-neutral-92: #f4f4f4; /* Neutral 92 */
    --md-ref-palette-neutral-94: #f4f4f4; /* Neutral 94 */
    --md-ref-palette-neutral-95: #fafafa; /* Neutral 95 */
    --md-ref-palette-neutral-96: #fafafa; /* Neutral 96 */
    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
    --md-ref-typeface-plain: Comic Sans MS; /* Plain typeface */
    --md-ref-typeface-brand: Comic Sans MS; /* Brand typeface */
    --md-ref-typeface-weight-bold: 700; /* Bold weight */
    --md-ref-typeface-weight-medium: 500; /* Medium weight */
    --md-ref-typeface-weight-regular: 400; /* Regular weight */

    /* Nifi Light mode. Use these variables when applying colors to elements */
    --nf-success-default: #31975b; /* The success color  */
    --nf-success-default-background: #bdf8e9;
    --nf-success-variant: #1390ca; /* The success variant color  */
    --nf-success-contrast: #ffffff; /* The success contrast color */
    --nf-caution-default: #cf9338; /* The caution color  */
    --nf-caution-contrast: #ffffff; /* The caution contrast color */
    --nf-neutral: #666666; /* The neutral color  */
    --nf-disabled: #d8d8d8; /* The color to use for disabled */
    --nf-error-variant: #eb7071; /* The stopped run status color  */
    --nf-new-canvas-item-grip: #000000; /* The new canvas item grip color */
    --nf-new-canvas-item-hover: #000000; /* The new canvas item hover color */
    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
    --nf-banner: #12121214; /* The banner row color */
    --nf-odd: #12121206; /* The odd background color */
    --nf-even: #fafafa; /* The even background color */
    --nf-text-shadow: 0 0 4px rgba(255, 255, 255, 1); /* The text shadow color */
    --nf-zero-opactiy: 0.6; /* The zero opacity color */
    --nf-connection-drop-shadow: white; /* The connection drop shadow color */
    --nf-canvas-background: #e5ebed; /* The canvas background color */
    --nf-canvas-border-stroke-width: 1; /* The canvas border stroke width */

    // Codemirror syntax highlighting
    --editor-bracket: #93937c;
    --editor-text: #191e24;
    --editor-comment: #5d6a85;
    --editor-string: #860112;
    --editor-keyword: #085bd7;
    --editor-function: #087959;
    --editor-type: #b67901;
    --editor-control-keyword: #b67901;
    --editor-variable-name: #002c6e;
    --editor-function-name-variable-name: #b67901;
    --editor-number: #087959;
    --editor-special: #bf0822;
    --editor-type-name: #087959;
    --editor-el-function: var(--editor-function);
    --editor-parameter: var(--editor-keyword);
    --editor-attribute-name: #9712e8;

    // Codemirror theme
    --editor-selected-background: #d6e6ff;
    --editor-selected-ui: #085bd7;
    --editor-selected-hover-text: #004cbe;
    --editor-line-number: #5d6a85;
    --editor-active-line-number: #191e24;
    --editor-error-bg: #f76a86;
    --editor-executed-bg: #d6e6ff;
    --editor-selection-match-bg: #9fabc144;
    --editor-search-match-bg: #ffedcd;
    --editor-search-match-selected-bg: #ffedcd;
    --editor-active-handler-border: #b67901;

    // Prism
    --nf-prism-language-color: var(--editor-parameter);
    --nf-prism-token-comment: var(--editor-comment);
    --nf-prism-token-punctuation: var(--editor-text);
    --nf-prism-token-constant: var(--editor-keyword);
    --nf-prism-token-function: var(--editor-el-function);

    @include mat.theme-overrides(
        (
            primary: var(--md-ref-palette-primary-40),
            on-primary: var(--md-ref-palette-primary-100),
            primary-container: var(--md-ref-palette-neutral-90),
            on-primary-container: var(--md-ref-palette-primary-40),
            inverse-primary: var(--md-ref-palette-primary-40),
            primary-fixed: var(--md-ref-palette-primary-40),
            primary-fixed-dim: var(--md-ref-palette-primary-40),
            on-primary-fixed: var(--md-ref-palette-primary-100),
            on-primary-fixed-variant: var(--md-ref-palette-primary-100),
            secondary: var(--md-ref-palette-secondary-40),
            on-secondary: var(--md-ref-palette-secondary-100),
            secondary-container: var(--md-ref-palette-secondary-80),
            on-secondary-container: var(--md-ref-palette-neutral-10),
            secondary-fixed: var(--md-ref-palette-secondary-50),
            secondary-fixed-dim: var(--md-ref-palette-secondary-50),
            on-secondary-fixed: var(--md-ref-palette-secondary-0),
            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
            tertiary: var(--md-ref-palette-tertiary-40),
            on-tertiary: var(--md-ref-palette-tertiary-0),
            tertiary-container: var(--md-ref-palette-tertiary-80),
            on-tertiary-container: var(--md-ref-palette-neutral-10),
            tertiary-fixed: var(--md-ref-palette-tertiary-40),
            tertiary-fixed-dim: var(--md-ref-palette-tertiary-40),
            on-tertiary-fixed: var(--md-ref-palette-tertiary-100),
            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-100),
            background: var(--md-ref-palette-neutral-99),
            on-background: var(--md-ref-palette-neutral-10),
            surface: var(--md-ref-palette-neutral-100),
            surface-dim: var(--md-ref-palette-neutral-90),
            surface-bright: var(--md-ref-palette-neutral-100),
            surface-container-lowest: var(--md-ref-palette-neutral-100),
            surface-container-low: var(--md-ref-palette-neutral-95),
            surface-container: var(--md-ref-palette-neutral-94),
            surface-container-high: var(--md-ref-palette-neutral-92),
            surface-container-highest: var(--md-ref-palette-neutral-90),
            on-surface: var(--md-ref-palette-neutral-10),
            shadow: var(--md-ref-palette-neutral-variant-0),
            scrim: var(--md-ref-palette-neutral-variant-0),
            surface-tint: var(--md-ref-palette-neutral-30),
            inverse-surface: var(--md-ref-palette-neutral-10),
            inverse-on-surface: var(--md-ref-palette-neutral-100),
            outline: var(--md-ref-palette-neutral-70),
            outline-variant: var(--md-ref-palette-neutral-variant-70),
            neutral: var(--md-ref-palette-neutral-40),
            neutral10: var(--md-ref-palette-neutral-20),
            error: var(--md-ref-palette-error-40),
            error-container: var(--md-ref-palette-error-40),
            on-error: var(--md-ref-palette-error-100),
            on-error-container: var(--md-ref-palette-error-100),
            surface-variant: var(--md-ref-palette-neutral-variant-90),
            on-surface-variant: var(--md-ref-palette-neutral-variant-30),
            neutral-variant: var(--md-ref-palette-neutral-variant-40),
            neutral-variant20: var(--md-ref-palette-neutral-variant-25),
            inverse-secondary: var(--md-ref-palette-secondary-50),
            inverse-tertiary: var(--md-ref-palette-tertiary-80)
        )
    );

    @include mat.snack-bar-overrides(
        (
            button-color: var(--md-ref-palette-secondary-80)
        )
    );

    .tertiary-checkbox {
        @include mat.checkbox-overrides(
            (
                selected-icon-color: var(--md-ref-palette-tertiary-40)
            )
        );
    }

    .primary-icon-button {
        @include mat.icon-button-overrides(
            (
                icon-color: var(--md-ref-palette-primary-40)
            )
        );
    }

    .error-button {
        @include mat.button-overrides(
            (
                filled-container-color: var(--md-ref-palette-error-40),
                filled-label-text-color: var(--md-ref-palette-error-100)
            )
        );
    }

    .tertiary-spinner {
        @include mat.progress-spinner-overrides(
            (
                active-indicator-color: var(--md-ref-palette-tertiary-40)
            )
        );
    }
}

// Note: Color palettes are generated from primary: #6750a4
$_palettes: (
    primary: (
        0: var(--md-ref-palette-primary-0),
        10: var(--md-ref-palette-primary-10),
        20: var(--md-ref-palette-primary-20),
        25: var(--md-ref-palette-primary-25),
        30: var(--md-ref-palette-primary-30),
        35: var(--md-ref-palette-primary-35),
        40: var(--md-ref-palette-primary-40),
        50: var(--md-ref-palette-primary-50),
        60: var(--md-ref-palette-primary-60),
        70: var(--md-ref-palette-primary-70),
        80: var(--md-ref-palette-primary-80),
        90: var(--md-ref-palette-primary-90),
        95: var(--md-ref-palette-primary-95),
        98: var(--md-ref-palette-primary-98),
        99: var(--md-ref-palette-primary-99),
        100: var(--md-ref-palette-primary-100)
    ),
    secondary: (
        0: var(--md-ref-palette-secondary-0),
        10: var(--md-ref-palette-secondary-10),
        20: var(--md-ref-palette-secondary-20),
        25: var(--md-ref-palette-secondary-25),
        30: var(--md-ref-palette-secondary-30),
        35: var(--md-ref-palette-secondary-35),
        40: var(--md-ref-palette-secondary-40),
        50: var(--md-ref-palette-secondary-50),
        60: var(--md-ref-palette-secondary-60),
        70: var(--md-ref-palette-secondary-70),
        80: var(--md-ref-palette-secondary-80),
        90: var(--md-ref-palette-secondary-90),
        95: var(--md-ref-palette-secondary-95),
        98: var(--md-ref-palette-secondary-98),
        99: var(--md-ref-palette-secondary-99),
        100: var(--md-ref-palette-secondary-100)
    ),
    tertiary: (
        0: var(--md-ref-palette-tertiary-0),
        10: var(--md-ref-palette-tertiary-10),
        20: var(--md-ref-palette-tertiary-20),
        25: var(--md-ref-palette-tertiary-25),
        30: var(--md-ref-palette-tertiary-30),
        35: var(--md-ref-palette-tertiary-35),
        40: var(--md-ref-palette-tertiary-40),
        50: var(--md-ref-palette-tertiary-50),
        60: var(--md-ref-palette-tertiary-60),
        70: var(--md-ref-palette-tertiary-70),
        80: var(--md-ref-palette-tertiary-80),
        90: var(--md-ref-palette-tertiary-90),
        95: var(--md-ref-palette-tertiary-95),
        98: var(--md-ref-palette-tertiary-98),
        99: var(--md-ref-palette-tertiary-99),
        100: var(--md-ref-palette-tertiary-100)
    ),
    neutral: (
        0: var(--md-ref-palette-neutral-0),
        4: var(--md-ref-palette-neutral-4),
        6: var(--md-ref-palette-neutral-6),
        10: var(--md-ref-palette-neutral-10),
        12: var(--md-ref-palette-neutral-12),
        17: var(--md-ref-palette-neutral-17),
        20: var(--md-ref-palette-neutral-20),
        22: var(--md-ref-palette-neutral-22),
        24: var(--md-ref-palette-neutral-24),
        25: var(--md-ref-palette-neutral-25),
        30: var(--md-ref-palette-neutral-30),
        35: var(--md-ref-palette-neutral-35),
        40: var(--md-ref-palette-neutral-40),
        50: var(--md-ref-palette-neutral-50),
        60: var(--md-ref-palette-neutral-60),
        70: var(--md-ref-palette-neutral-70),
        80: var(--md-ref-palette-neutral-80),
        87: var(--md-ref-palette-neutral-87),
        90: var(--md-ref-palette-neutral-90),
        92: var(--md-ref-palette-neutral-92),
        94: var(--md-ref-palette-neutral-94),
        95: var(--md-ref-palette-neutral-95),
        96: var(--md-ref-palette-neutral-96),
        98: var(--md-ref-palette-neutral-98),
        99: var(--md-ref-palette-neutral-99),
        100: var(--md-ref-palette-neutral-100)
    ),
    neutral-variant: (
        0: var(--md-ref-palette-neutral-variant-0),
        10: var(--md-ref-palette-neutral-variant-10),
        20: var(--md-ref-palette-neutral-variant-20),
        25: var(--md-ref-palette-neutral-variant-25),
        30: var(--md-ref-palette-neutral-variant-30),
        35: var(--md-ref-palette-neutral-variant-35),
        40: var(--md-ref-palette-neutral-variant-40),
        50: var(--md-ref-palette-neutral-variant-50),
        60: var(--md-ref-palette-neutral-variant-60),
        70: var(--md-ref-palette-neutral-variant-70),
        80: var(--md-ref-palette-neutral-variant-80),
        90: var(--md-ref-palette-neutral-variant-90),
        95: var(--md-ref-palette-neutral-variant-95),
        98: var(--md-ref-palette-neutral-variant-98),
        99: var(--md-ref-palette-neutral-variant-99),
        100: var(--md-ref-palette-neutral-variant-100)
    ),
    error: (
        0: var(--md-ref-palette-error-0),
        10: var(--md-ref-palette-error-10),
        20: var(--md-ref-palette-error-20),
        25: var(--md-ref-palette-error-25),
        30: var(--md-ref-palette-error-30),
        35: var(--md-ref-palette-error-35),
        40: var(--md-ref-palette-error-40),
        50: var(--md-ref-palette-error-50),
        60: var(--md-ref-palette-error-60),
        70: var(--md-ref-palette-error-70),
        80: var(--md-ref-palette-error-80),
        90: var(--md-ref-palette-error-90),
        95: var(--md-ref-palette-error-95),
        98: var(--md-ref-palette-error-98),
        99: var(--md-ref-palette-error-99),
        100: var(--md-ref-palette-error-100)
    )
);

$_rest: (
    secondary: map.get($_palettes, secondary),
    neutral: map.get($_palettes, neutral),
    neutral-variant: map.get($_palettes, neutral-variant),
    error: map.get($_palettes, error)
);

$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

@include mat.app-background();

/* Light Theme */
html {
    color-scheme: light;
    @include mat.theme(
        (
            color: (
                primary: $primary-palette,
                tertiary: $tertiary-palette
            ),
            typography: (
                plain-family: var(--md-ref-typeface-plain),
                brand-family: var(--md-ref-typeface-brand),
                bold-weight: var(--md-ref-typeface-weight-bold),
                regular-weight: var(--md-ref-typeface-weight-regular)
            ),
            density: (
                scale: -3
            )
        )
    );
}

/* Light Theme */
html {
    color-scheme: light;
}

/* Dark Theme */
.darkMode {
    --md-ref-palette-error-0: #000000; /* Error 0 */
    --md-ref-palette-error-10: #000000; /* Error 10 */
    --md-ref-palette-error-20: #000000; /* Error 20 */
    --md-ref-palette-error-25: #a8372a; /* Error 25 */
    --md-ref-palette-error-30: #ba554a; /* Error 30 */
    --md-ref-palette-error-35: #ba554a; /* Error 35 */
    --md-ref-palette-error-40: #ba554a; /* Error 40 */
    --md-ref-palette-error-50: #eb7071; /* Error 50 */
    --md-ref-palette-error-60: #eb7071; /* Error 60 */
    --md-ref-palette-error-70: #eb7071; /* Error 70 */
    --md-ref-palette-error-80: #eb7071; /* Error 80 */
    --md-ref-palette-error-90: #f49999; /* Error 90 */
    --md-ref-palette-error-95: #f49999; /* Error 95 */
    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
    --md-ref-palette-error-100: #ffffff; /* Error 100 */
    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
    --md-ref-palette-tertiary-10: #004d40; /* Tertiary 10 */
    --md-ref-palette-tertiary-20: #00695c; /* Tertiary 20 */
    --md-ref-palette-tertiary-25: #00796b; /* Tertiary 25 */
    --md-ref-palette-tertiary-30: #00897b; /* Tertiary 30 */
    --md-ref-palette-tertiary-35: #009688; /* Tertiary 35 */
    --md-ref-palette-tertiary-40: #26a69a; /* Tertiary 40 */
    --md-ref-palette-tertiary-50: #4db6ac; /* Tertiary 50 */
    --md-ref-palette-tertiary-60: #80cbc4; /* Tertiary 60 */
    --md-ref-palette-tertiary-70: #b2dfdb; /* Tertiary 70 */
    --md-ref-palette-tertiary-80: #e0f2f1; /* Tertiary 80 */
    --md-ref-palette-tertiary-90: #e0f2f1; /* Tertiary 90 */
    --md-ref-palette-tertiary-95: #e0f2f1; /* Tertiary 95 */
    --md-ref-palette-tertiary-98: #e0f2f1; /* Tertiary 98 */
    --md-ref-palette-tertiary-99: #e0f2f1; /* Tertiary 99 */
    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
    --md-ref-palette-secondary-10: #311b92; /* Secondary 10 */
    --md-ref-palette-secondary-20: #4527a0; /* Secondary 20 */
    --md-ref-palette-secondary-25: #512da8; /* Secondary 25 */
    --md-ref-palette-secondary-30: #5e35b1; /* Secondary 30 */
    --md-ref-palette-secondary-35: #673ab7; /* Secondary 35 */
    --md-ref-palette-secondary-40: #7e57c2; /* Secondary 40 */
    --md-ref-palette-secondary-50: #9575cd; /* Secondary 50 */
    --md-ref-palette-secondary-60: #b39ddb; /* Secondary 60 */
    --md-ref-palette-secondary-70: #d1c4e9; /* Secondary 70 */
    --md-ref-palette-secondary-80: #ede7f6; /* Secondary 80 */
    --md-ref-palette-secondary-90: #ede7f6; /* Secondary 90 */
    --md-ref-palette-secondary-95: #ede7f6; /* Secondary 95 */
    --md-ref-palette-secondary-98: #ede7f6; /* Secondary 98 */
    --md-ref-palette-secondary-99: #ede7f6; /* Secondary 99 */
    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
    --md-ref-palette-primary-0: #000000; /* Primary 0 */
    --md-ref-palette-primary-10: #311b92; /* Primary 10 */
    --md-ref-palette-primary-20: #4527a0; /* Primary 20 */
    --md-ref-palette-primary-25: #512da8; /* Primary 25 */
    --md-ref-palette-primary-30: #5e35b1; /* Primary 30 */
    --md-ref-palette-primary-35: #673ab7; /* Primary 35 */
    --md-ref-palette-primary-40: #7e57c2; /* Primary 40 */
    --md-ref-palette-primary-50: #9575cd; /* Primary 50 */
    --md-ref-palette-primary-60: #b39ddb; /* Primary 60 */
    --md-ref-palette-primary-70: #d1c4e9; /* Primary 70 */
    --md-ref-palette-primary-80: #ede7f6; /* Primary 80 */
    --md-ref-palette-primary-90: #ede7f6; /* Primary 90 */
    --md-ref-palette-primary-95: #ede7f6; /* Primary 95 */
    --md-ref-palette-primary-98: #ede7f6; /* Primary 98 */
    --md-ref-palette-primary-99: #ede7f6; /* Primary 99 */
    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
    --md-ref-palette-neutral-variant-40: #666666; /* Neutral Variant 40 */
    --md-ref-palette-neutral-variant-50: #666666; /* Neutral Variant 50 */
    --md-ref-palette-neutral-variant-60: #666666; /* Neutral Variant 60 */
    --md-ref-palette-neutral-variant-70: #acacac; /* Neutral Variant 70 */
    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
    --md-ref-palette-neutral-4: #303030; /* Neutral 4 */
    --md-ref-palette-neutral-6: #303030; /* Neutral 6 */
    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
    --md-ref-palette-neutral-12: #444444; /* Neutral 12 */
    --md-ref-palette-neutral-17: #444444; /* Neutral 17 */
    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
    --md-ref-palette-neutral-70: #cccccc; /* Neutral 70 */
    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
    --md-ref-palette-neutral-92: #e3e3e3; /* Neutral 92 */
    --md-ref-palette-neutral-94: #e3e3e3; /* Neutral 94 */
    --md-ref-palette-neutral-95: #f4f4f4; /* Neutral 95 */
    --md-ref-palette-neutral-96: #f4f4f4; /* Neutral 96 */
    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
    --md-ref-typeface-plain: Comic Sans MS; /* Plain typeface */
    --md-ref-typeface-brand: Comic Sans MS; /* Brand typeface */
    --md-ref-typeface-weight-bold: 700; /* Bold weight */
    --md-ref-typeface-weight-medium: 500; /* Medium weight */
    --md-ref-typeface-weight-regular: 400; /* Regular weight */

    /* Nifi Dark mode. Use these variables when applying colors to elements */
    --nf-success-default: #31975b; /* The success color  */
    --nf-success-default-background: #bdf8e9;
    --nf-success-variant: #1390ca; /* The success variant color  */
    --nf-success-contrast: #ffffff; /* The success contrast color */
    --nf-caution-default: #cf9338; /* The caution color  */
    --nf-caution-contrast: #ffffff; /* The caution contrast color */
    --nf-neutral: #acacac; /* The neutral color  */
    --nf-disabled: #cccccc; /* The color to use for disabled */
    --nf-error-variant: #f49999; /* The stopped run status color  */
    --nf-new-canvas-item-grip: #000000; /* The new canvas item grip color  */
    --nf-new-canvas-item-hover: #ffffff; /* The new canvas item hover color  */
    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
    --nf-banner: #f4f4f414; /* The banner row color */
    --nf-odd: #f4f4f406; /* The odd background color */
    --nf-even: #303030; /* The even background color */
    --nf-text-shadow: 0 0 4px rgba(0, 0, 0, 1); /* The text shadow color */
    --nf-zero-opactiy: 0.5; /* The zero opacity color */
    --nf-connection-drop-shadow: black; /* The connection drop shadow color */
    --nf-canvas-background: #0d1411; /* The canvas background color */
    --nf-canvas-border-stroke-width: 2; /* The canvas border stroke width */

    // Codemirror syntax highlighting
    --editor-bracket: #93937c;
    --editor-text: #f7f7f7;
    --editor-comment: #70819a;
    --editor-string: #f76a86;
    --editor-keyword: #86b6fc;
    --editor-function: #97f3cf;
    --editor-type: #fccf54;
    --editor-control-keyword: #fccf54;
    --editor-variable-name: #5999f8;
    --editor-function-name-variable-name: #fccf54;
    --editor-number: #97f3cf;
    --editor-special: #f76a86;
    --editor-type-name: #97f3cf;
    --editor-el-function: var(--editor-function);
    --editor-parameter: var(--editor-keyword);
    --editor-attribute-name: #cb7efa;

    // Codemirror theme
    --editor-selected-background: #d6e6ff;
    --editor-selected-ui: #085bd7;
    --editor-selected-hover-text: #004cbe;
    --editor-line-number: #bdc4d5;
    --editor-active-line-number: #fbfbfb;
    --editor-error-bg: #66000e;
    --editor-executed-bg: #002c6e;
    --editor-selection-match-bg: #9fabc144;
    --editor-search-match-bg: #653e03;
    --editor-search-match-selected-bg: #dd5f04cc;
    --editor-active-handler-border: #ffedcd;

    // Prism
    --nf-prism-language-color: var(--editor-parameter);
    --nf-prism-token-comment: var(--editor-comment);
    --nf-prism-token-punctuation: var(--editor-text);
    --nf-prism-token-constant: var(--editor-keyword);
    --nf-prism-token-function: var(--editor-el-function);

    color-scheme: dark;

    @include mat.theme-overrides(
        (
            primary: var(--md-ref-palette-primary-80),
            on-primary: var(--md-ref-palette-primary-0),
            primary-container: var(--md-ref-palette-neutral-30),
            on-primary-container: var(--md-ref-palette-primary-80),
            inverse-primary: var(--md-ref-palette-primary-80),
            primary-fixed: var(--md-ref-palette-primary-80),
            primary-fixed-dim: var(--md-ref-palette-primary-80),
            on-primary-fixed: var(--md-ref-palette-primary-0),
            on-primary-fixed-variant: var(--md-ref-palette-primary-0),
            secondary: var(--md-ref-palette-secondary-40),
            on-secondary: var(--md-ref-palette-secondary-0),
            secondary-container: var(--md-ref-palette-secondary-40),
            on-secondary-container: var(--md-ref-palette-secondary-0),
            secondary-fixed: var(--md-ref-palette-secondary-40),
            secondary-fixed-dim: var(--md-ref-palette-secondary-40),
            on-secondary-fixed: var(--md-ref-palette-secondary-0),
            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
            tertiary: var(--md-ref-palette-tertiary-60),
            on-tertiary: var(--md-ref-palette-tertiary-0),
            tertiary-container: var(--md-ref-palette-tertiary-10),
            on-tertiary-container: var(--md-ref-palette-neutral-90),
            tertiary-fixed: var(--md-ref-palette-tertiary-60),
            tertiary-fixed-dim: var(--md-ref-palette-tertiary-60),
            on-tertiary-fixed: var(--md-ref-palette-tertiary-0),
            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-0),
            background: var(--md-ref-palette-neutral-4),
            on-background: var(--md-ref-palette-neutral-90),
            surface: var(--md-ref-palette-neutral-12),
            surface-dim: var(--md-ref-palette-neutral-4),
            surface-bright: var(--md-ref-palette-neutral-12),
            surface-container-lowest: var(--md-ref-palette-neutral-variant-0),
            surface-container-low: var(--md-ref-palette-neutral-4),
            surface-container: var(--md-ref-palette-neutral-12),
            surface-container-high: var(--md-ref-palette-neutral-12),
            surface-container-highest: var(--md-ref-palette-neutral-30),
            on-surface: var(--md-ref-palette-neutral-90),
            shadow: var(--md-ref-palette-neutral-variant-0),
            scrim: var(--md-ref-palette-neutral-variant-0),
            surface-tint: var(--md-ref-palette-neutral-30),
            inverse-surface: var(--md-ref-palette-neutral-90),
            inverse-on-surface: var(--md-ref-palette-neutral-variant-0),
            outline: var(--md-ref-palette-neutral-30),
            outline-variant: var(--md-ref-palette-neutral-30),
            neutral: var(--md-ref-palette-neutral-60),
            neutral10: var(--md-ref-palette-neutral-90),
            error: var(--md-ref-palette-error-50),
            error-container: var(--md-ref-palette-error-50),
            on-error: var(--md-ref-palette-error-100),
            on-error-container: var(--md-ref-palette-error-100),
            surface-variant: var(--md-ref-palette-neutral-variant-40),
            on-surface-variant: var(--md-ref-palette-neutral-variant-90),
            neutral-variant: var(--md-ref-palette-neutral-variant-70),
            neutral-variant20: var(--md-ref-palette-neutral-variant-80),
            inverse-secondary: var(--md-ref-palette-secondary-40),
            inverse-tertiary: var(--md-ref-palette-tertiary-70)
        )
    );

    @include mat.snack-bar-overrides(
        (
            button-color: #004849
        )
    );

    .tertiary-checkbox {
        @include mat.checkbox-overrides(
            (
                selected-icon-color: var(--md-ref-palette-tertiary-70)
            )
        );
    }

    .primary-icon-button {
        @include mat.icon-button-overrides(
            (
                icon-color: var(--md-ref-palette-primary-80)
            )
        );
    }

    .error-button {
        @include mat.button-overrides(
            (
                filled-container-color: var(--md-ref-palette-error-50),
                filled-label-text-color: var(--md-ref-palette-error-100)
            )
        );
    }

    .tertiary-spinner {
        @include mat.progress-spinner-overrides(
            (
                active-indicator-color: var(--md-ref-palette-tertiary-70)
            )
        );
    }
}
