html[data-color-mode="light"] {
    --jira-hero-button-hover-bg-color:
        color-mix(
            in srgb,
            var(--jira-color-heroButtonBaseBGColour, var(--ds-background-brand-bold, #0052cce6)),
            var(--ds-text, #000) 15%
        );
}

html[data-color-mode="dark"] {
    --jira-hero-button-hover-bg-color: var(--ds-background-brand-bold-hovered, #0052cce6);
    --jira-hero-button-active-bg-color: color-mix(in srgb, var(--jira-color-heroButtonBaseBGColour, var(--ds-background-brand-bold, #0052cce6)) 30%, var(--ds-text-inverse, #fff));
}

#header > .aui-header.aui-dropdown2-trigger-group {
    --jira-hero-button-hover-bg-colour-static: color-mix(in srgb, var(--jira-color-scheme-heroButtonBaseBGColour, var(--ds-background-brand-bold, #0052cce6)) 70%, var(--ds-text-inverse, #fff));
    --jira-hero-button-active-bg-color-static: color-mix(in srgb, var(--jira-color-scheme-heroButtonBaseBGColour, var(--ds-background-brand-bold, #0052cce6)) 30%, var(--ds-text-inverse, #fff));
    --jira-hero-button-active-text-color-static: contrast(var(--jira-hero-button-hover-bg-colour-static), var(--ds-text-inverse, #fff), var(--ds-text-inverse, #fafafa));
    --aui-appheader-bg-color: var(--jira-color-topBackgroundColour, var(--ds-surface, #205081)); /* jira previous main value: --ds-surface */
    --aui-lf-appheader-bg-color: var(--jira-color-topBackgroundColour, var(--ds-surface, #205081)); /* jira previous main value: --ds-surface */
    --aui-appheader-text-color: var(--jira-color-topTxtColour, var(--ds-text-inverse, #fff)); /* jira previous main value: --ds-text-inverse */
    --aui-lf-appheader-text-color: var(--jira-color-topTxtColour, var(--ds-text-inverse, #fff)); /* jira previous main value: --ds-text-inverse */
    --aui-appheader-item-focus-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
    --aui-lf-appheader-item-focus-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
    --aui-button-primary-text-color: var(--jira-color-heroButtonTextColour, var(--ds-text-inverse, #fff)); /* jira previous main value: --ds-text-inverse */
    --aui-button-primary-bg-color: var(--jira-color-heroButtonBaseBGColour, var(--ds-background-selected-bold, #3b7fc4)); /* jira previous main value: --ds-background-selected-bold */
    --aui-button-primary-hover-bg-color: var(--jira-hero-button-hover-bg-color, var(--jira-hero-button-hover-bg-colour-static));
    --aui-button-primary-active-bg-color: var(--jira-hero-button-active-bg-color, var(--jira-hero-button-active-bg-color-static));
    --aui-button-primary-active-text-color: var(--jira-color-heroButtonTextColour, var(--jira-hero-button-active-text-color-static));
    --aui-lf-appheader-item-hover-bg-color: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3));

    .aui-nav > li > a:not(.create-issue) {
        --aui-item-focus-bg: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3)); /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-item-active-bg: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3)); /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-item-focus-text: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
        --aui-item-active-text: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
        --aui-appheader-item-focus-bg-color: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3)); /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-lf-appheader-item-focus-bg-color: transparent; /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-appheader-item-focus-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
        --aui-lf-appheader-item-focus-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
        --aui-appheader-item-active-bg-color: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3)); /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-lf-appheader-item-active-bg-color: var(--jira-color-topHighlightColor, var(--ds-background-selected-bold-hovered, #296ca3)); /* jira previous main value: --ds-background-selected-bold-hovered */
        --aui-appheader-item-active-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */
        --aui-lf-appheader-item-active-text-color: var(--jira-color-topTextHighlightColor, var(--ds-text-inverse, #f0f0f0)); /* jira previous main value: --ds-text-inverse */

        &:hover {
            background-color: var(--aui-lf-appheader-item-hover-bg-color);
        }
    }

    .create-issue:focus {
        outline: 2px solid var(--ds-border-focused, #388bff);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px;
    }

    border-bottom: 1px solid var(--jira-color-topSeparatorBackgroundColor, var(--ds-background-brand-boldest, #2e3d54));

    .aui-dropdown2-in-header {
        --aui-item-focus-text: var(--jira-color-menuTxtColour, var(--ds-text-inverse, #fff));
        --aui-item-focus-bg: var(--jira-color-menuBackgroundColour, var(--ds-background-selected-bold, #3b73af));
    }

    #logo a {
        padding: 0 10px;
    }

    .aui-header-secondary {
        #quicksearch-menu {
            margin-right: 9px;
            position: relative;

            .quicksearch-placeholder-icon {
                --icon-primary-color: currentColor;
                --icon-secondary-color: var(--ds-surface, #fff);

                position: absolute;
                top: 7px;
                left: 5px;
                display: inline-block;
                flex-shrink: 0;
                line-height: 1;
                color: var(--ds-text, #091e42);

                svg {
                    color: var(--icon-primary-color);
                    fill: var(--icon-secondary-color);
                }
            }

            .quicksearch-placeholder-wrapper {
                align-items: center;
                background-color: var(--ds-background-input, #fafbfc);
                border-color: var(--ds-border-input, #dfe1e6);
                color: var(--ds-text, #091e42);
                cursor: text;
                border-radius: 3px;
                border-style: solid;
                box-sizing: border-box;
                display: flex;
                flex: 1 1 100%;
                font-size: 14px;
                justify-content: space-between;
                max-width: 170px;
                overflow: hidden;
                transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
                word-wrap: break-word;
                vertical-align: top;
                pointer-events: auto;
                border-width: 1px;
            }

            .quicksearch-placeholder-input {
                padding-left: 26px;
                height: 2em;
                box-sizing: border-box;
                border-color: var(--ds-border-input, #dfe1e6);
                background-color: transparent;
                border: 0;
                color: inherit;
                cursor: inherit;
                font-size: 14px;
                min-width: 0;
                outline: 1px;
                width: 100%;
                line-height: 1.4285714285714286;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            }

            .quicksearch-textbox div {
                border-width: 1px;
            }

            .quicksearch-textbox span {
                padding-left: 4px;
            }

            .aui-quicksearch::before {
                display: none;
            }
        }

        .aui-nav {
            /*
             * Added these paddings to artificially maintain the size of aui-nav
             * after quicksearch was removed from it. This is to prevent breaking
             * tests that are heavily dependent on the nav size in a large number of plugins.
             * so please don't remove these indents.
             */
            padding-left: 180px;
            margin-left: -180px;
        }
    }
}

#header > .aui-header .aui-header-logo-text {
    margin-left: 0.5em;
}