/*!
 *  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;

@use '@fontsource/inter' as inter-normal;
@use '@fontsource/inter/400.css' as inter-400;
@use '@fontsource/inter/400-italic.css' as inter-italic;
@use '@fontsource/inter/700.css' as inter-700;

@layer base {
    @font-face {
        font-family: 'Inter';
    }
}

:root {
    /* Material Design color palettes and typography for light mode. These are used by Angular Material SASS api's to define the theme for all Angular Material components. These variable should NOT be referenced outside of the theme file. */
    --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: #3e2723; /* Tertiary 10 */
    --md-ref-palette-tertiary-20: #4e342e; /* Tertiary 20 */
    --md-ref-palette-tertiary-25: #4e342e; /* Tertiary 25 */
    --md-ref-palette-tertiary-30: #5d4037; /* Tertiary 30 */
    --md-ref-palette-tertiary-35: #6d4c41; /* Tertiary 35 */
    --md-ref-palette-tertiary-40: #795548; /* Tertiary 40 */
    --md-ref-palette-tertiary-50: #8d6e63; /* Tertiary 50 */
    --md-ref-palette-tertiary-60: #a1887f; /* Tertiary 60 */
    --md-ref-palette-tertiary-70: #bcaaa4; /* Tertiary 70 */
    --md-ref-palette-tertiary-80: #d7ccc8; /* Tertiary 80 */
    --md-ref-palette-tertiary-90: #d7ccc8; /* Tertiary 90 */
    --md-ref-palette-tertiary-95: #efebe9; /* Tertiary 95 */
    --md-ref-palette-tertiary-98: #efebe9; /* Tertiary 98 */
    --md-ref-palette-tertiary-99: #efebe9; /* Tertiary 99 */
    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
    --md-ref-palette-secondary-10: #314149; /* Secondary 10 */
    --md-ref-palette-secondary-20: #3f5863; /* Secondary 20 */
    --md-ref-palette-secondary-25: #4e6c79; /* Secondary 25 */
    --md-ref-palette-secondary-30: #597b8a; /* Secondary 30 */
    --md-ref-palette-secondary-35: #728e9b; /* Secondary 35 */
    --md-ref-palette-secondary-40: #8aa2ad; /* Secondary 40 */
    --md-ref-palette-secondary-50: #abbdc5; /* Secondary 50 */
    --md-ref-palette-secondary-60: #abbdc5; /* Secondary 60 */
    --md-ref-palette-secondary-70: #abbdc5; /* Secondary 70 */
    --md-ref-palette-secondary-80: #cbd8dd; /* Secondary 80 */
    --md-ref-palette-secondary-90: #cbd8dd; /* Secondary 90 */
    --md-ref-palette-secondary-95: #cbd8dd; /* Secondary 95 */
    --md-ref-palette-secondary-98: #cbd8dd; /* Secondary 98 */
    --md-ref-palette-secondary-99: #cbd8dd; /* Secondary 99 */
    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
    --md-ref-palette-primary-0: #000000; /* Primary 0 */
    --md-ref-palette-primary-10: #002020; /* Primary 10 */
    --md-ref-palette-primary-20: #003738; /* Primary 20 */
    --md-ref-palette-primary-25: #004344; /* Primary 25 */
    --md-ref-palette-primary-30: #004849; /* Primary 30 */
    --md-ref-palette-primary-35: #004849; /* Primary 35 */
    --md-ref-palette-primary-40: #004849; /* Primary 40 */
    --md-ref-palette-primary-50: #478081; /* Primary 50 */
    --md-ref-palette-primary-60: #629a9b; /* Primary 60 */
    --md-ref-palette-primary-70: #7cb5b6; /* Primary 70 */
    --md-ref-palette-primary-80: #97d1d1; /* Primary 80 */
    --md-ref-palette-primary-90: #b3eded; /* Primary 90 */
    --md-ref-palette-primary-95: #c1fbfc; /* Primary 95 */
    --md-ref-palette-primary-98: #e2ffff; /* Primary 98 */
    --md-ref-palette-primary-99: #f1fffe; /* 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: Inter; /* Plain typeface */
    --md-ref-typeface-brand: Inter; /* 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: #ffffff; /* 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: #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-50),
            on-secondary: var(--md-ref-palette-secondary-0),
            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-0),
            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.sidenav-overrides(
        (
            container-width: auto,
            container-shape: 0
        )
    );

    @include mat.expansion-overrides(
        (
            container-shape: 6px,
            header-expanded-state-height: 50px
        )
    );

    @include mat.menu-overrides(
        (
            divider-top-spacing: 0,
            divider-bottom-spacing: 0
        )
    );

    @include mat.dialog-overrides(
        (
            content-padding: 20px 24px,
            headline-padding: 0 24px 9px,
            container-shape: 6px
        )
    );

    @include mat.icon-button-overrides(
        (
            state-layer-size: 36px,
            icon-size: 14px
        )
    );

    @include mat.button-overrides(
        (
            filled-container-shape: 4px,
            filled-label-text-tracking: normal,
            filled-label-text-weight: 400,
            outlined-container-shape: 4px,
            outlined-label-text-tracking: normal,
            outlined-label-text-weight: 400,
            outlined-horizontal-padding: 15px,
            outlined-container-height: 32px,
            text-container-shape: 4px,
            text-label-text-tracking: normal,
            text-label-text-weight: 400
        )
    );

    @include mat.tabs-overrides(
        (
            label-text-tracking: normal,
            label-text-weight: 400,
            container-height: 36px
        )
    );

    @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
            )
        )
    );
}

/* Dark Theme */
.darkMode {
    /* Material Design color palettes and typography for dark mode. These are used by Angular Material SASS api's to define the theme for all Angular Material components. These variable should NOT be referenced outside of the theme file. */
    --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: #3e2723; /* Tertiary 10 */
    --md-ref-palette-tertiary-20: #4e342e; /* Tertiary 20 */
    --md-ref-palette-tertiary-25: #4e342e; /* Tertiary 25 */
    --md-ref-palette-tertiary-30: #5d4037; /* Tertiary 30 */
    --md-ref-palette-tertiary-35: #6d4c41; /* Tertiary 35 */
    --md-ref-palette-tertiary-40: #795548; /* Tertiary 40 */
    --md-ref-palette-tertiary-50: #8d6e63; /* Tertiary 50 */
    --md-ref-palette-tertiary-60: #a1887f; /* Tertiary 60 */
    --md-ref-palette-tertiary-70: #bcaaa4; /* Tertiary 70 */
    --md-ref-palette-tertiary-80: #d7ccc8; /* Tertiary 80 */
    --md-ref-palette-tertiary-90: #d7ccc8; /* Tertiary 90 */
    --md-ref-palette-tertiary-95: #efebe9; /* Tertiary 95 */
    --md-ref-palette-tertiary-98: #efebe9; /* Tertiary 98 */
    --md-ref-palette-tertiary-99: #efebe9; /* Tertiary 99 */
    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
    --md-ref-palette-secondary-10: #000000; /* Secondary 10 */
    --md-ref-palette-secondary-20: #000000; /* Secondary 20 */
    --md-ref-palette-secondary-25: #4e6c79; /* Secondary 25 */
    --md-ref-palette-secondary-30: #597b8a; /* Secondary 30 */
    --md-ref-palette-secondary-35: #728e9b; /* Secondary 35 */
    --md-ref-palette-secondary-40: #8aa2ad; /* Secondary 40 */
    --md-ref-palette-secondary-50: #abbdc5; /* Secondary 50 */
    --md-ref-palette-secondary-60: #abbdc5; /* Secondary 60 */
    --md-ref-palette-secondary-70: #abbdc5; /* Secondary 70 */
    --md-ref-palette-secondary-80: #cbd8dd; /* Secondary 80 */
    --md-ref-palette-secondary-90: #cbd8dd; /* Secondary 90 */
    --md-ref-palette-secondary-95: #cbd8dd; /* Secondary 95 */
    --md-ref-palette-secondary-98: #cbd8dd; /* Secondary 98 */
    --md-ref-palette-secondary-99: #cbd8dd; /* Secondary 99 */
    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
    --md-ref-palette-primary-0: #000000; /* Primary 0 */
    --md-ref-palette-primary-10: #000000; /* Primary 10 */
    --md-ref-palette-primary-20: #000000; /* Primary 20 */
    --md-ref-palette-primary-25: #4e6c79; /* Primary 25 */
    --md-ref-palette-primary-30: #597b8a; /* Primary 30 */
    --md-ref-palette-primary-35: #728e9b; /* Primary 35 */
    --md-ref-palette-primary-40: #8aa2ad; /* Primary 40 */
    --md-ref-palette-primary-50: #abbdc5; /* Primary 50 */
    --md-ref-palette-primary-60: #abbdc5; /* Primary 60 */
    --md-ref-palette-primary-70: #abbdc5; /* Primary 70 */
    --md-ref-palette-primary-80: #cbd8dd; /* Primary 80 */
    --md-ref-palette-primary-90: #cbd8dd; /* Primary 90 */
    --md-ref-palette-primary-95: #cbd8dd; /* Primary 95 */
    --md-ref-palette-primary-98: #cbd8dd; /* Primary 98 */
    --md-ref-palette-primary-99: #cbd8dd; /* 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: Inter; /* Plain typeface */
    --md-ref-typeface-brand: Inter; /* 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-70),
            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-70),
            tertiary-fixed-dim: var(--md-ref-palette-tertiary-70),
            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-90),
            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.sidenav-overrides(
        (
            container-width: auto,
            container-shape: 0
        )
    );

    @include mat.expansion-overrides(
        (
            container-shape: 6px,
            header-expanded-state-height: 50px
        )
    );

    @include mat.menu-overrides(
        (
            divider-top-spacing: 0,
            divider-bottom-spacing: 0
        )
    );

    @include mat.dialog-overrides(
        (
            content-padding: 20px 24px,
            headline-padding: 0 24px 9px,
            container-shape: 6px
        )
    );

    @include mat.icon-button-overrides(
        (
            state-layer-size: 36px,
            icon-size: 14px
        )
    );

    @include mat.button-overrides(
        (
            filled-container-shape: 4px,
            filled-label-text-tracking: normal,
            filled-label-text-weight: 400,
            outlined-container-shape: 4px,
            outlined-label-text-tracking: normal,
            outlined-label-text-weight: 400,
            outlined-horizontal-padding: 15px,
            outlined-container-height: 32px,
            text-container-shape: 4px,
            text-label-text-tracking: normal,
            text-label-text-weight: 400
        )
    );

    @include mat.tabs-overrides(
        (
            label-text-tracking: normal,
            label-text-weight: 400,
            container-height: 36px
        )
    );

    @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)
            )
        );
    }
}
