$siteHeader_underlay_styles: (
    background-color: rgba($_PAGE-COLOR, .8),
) !default;

$siteHeader_label_overview: (
    default: "Overview",
    en: "Overview",
    de: "Übersicht",
    pl: "przegląd",
);

//***** Desktop Primary *****//

$siteHeader_dropdown_transition-duration: 2 * $_transition-duration--in !default;

$siteHeader_text-decoration-thickness: 2px !default;
$siteHeader_text-decoration-thickness--secondary: 2px !default;
$siteHeader_text-decoration-thickness--mobile: $siteHeader_text-decoration-thickness !default;
$siteHeader_text-decoration-thickness--secondary--mobile: 1.5px !default;

$siteHeader_level-1_styles: (
    --decoration-thickness: $siteHeader_text-decoration-thickness,
    font-weight: $_font-weight--bold,
    background-image: (
        linear-gradient($_action-border-color, $_action-border-color),
        linear-gradient($_text-color, $_text-color)
    ),
    background-repeat: no-repeat,
    background-size: 0 var(--decoration-thickness),
    background-position: left 100%,
    transition-property: background,
    transition-duration: $_transition-duration,
) !default;

$siteHeader_level-1_states: (
    default: $siteHeader_level-1_styles,
    hover: (
        background-size: 100% var(--decoration-thickness),
        transition-duration: $_transition-duration--in,
    ),
    focus: $_focus_styles,
    current: (
        background-size: (
            0 var(--decoration-thickness),
            100% var(--decoration-thickness),
        ),
    ),
    expanded: (
        background-size: 100% var(--decoration-thickness) !important,
    ),
) !default;

$siteHeader_level-2_styles: (
    font-weight: $_font-weight--bold,
    text-size: small,
    padding: var(--bp-small, #{$_box_padding--small}) var(--bp, #{$_box_padding}),
    transition: $_transition-duration--in,
) !default;

$siteHeader_level-2_states: (
    default: $siteHeader_level-2_styles,
    hover: (
    ),
    focus: $_focus_styles,
    current: (
    ),
) !default;

$siteHeader_level-3_styles: (
    text-size: x-small,
    padding: calc(.5 * var(--bp-small, #{$_box_padding--small})) var(--bp, #{$_box_padding}),
    transition: $_transition-duration--in,
) !default;

$siteHeader_level-3_states: (
    default: $siteHeader_level-3_styles,
    hover: (
        background-color: $_border-color,
    ),
    focus: $_focus_styles,
    current: (
    ),
) !default;

$siteHeader_dropdown_style: (
    background-color: $_backdrop-color,
    border-top: $siteHeader_text-decoration-thickness solid $_action-border-color,
    box-shadow: var(--bs-small),
    left: calc(-1 * var(--bp)),
    min-width: calc(100% + 2 * var(--bp, #{$_box_padding})),
    margin-top: (-1 * $siteHeader_text-decoration-thickness),
    border-bottom-left-radius: var(--br-small),
    border-bottom-right-radius: var(--br-small),
    overflow: hidden,
) !default;

//***** Desktop Secondary *****//

$siteHeader_link_styles--secondary: map.merge(
    $siteHeader_level-1_styles,
    (
        --decoration-thickness: $siteHeader_text-decoration-thickness--secondary,
        font-size: x-small,
        line-height: 1.5,
        font-weight: $_font-weight,
    )
) !default;

$siteHeader_link_states--secondary: (
    default: $siteHeader_link_styles--secondary,
    hover: (

    ),
    focus: $_focus_styles,
    current: (
    ),
) !default;

$siteHeader_level-2_styles--secondary: (
    font-weight: $_font-weight,
    text-size: smallest,
) !default;

$siteHeader_dropdown_style--secondary: (
) !default;

//***** Mobile Primary *****//

$siteHeader_level_styles--mobile: (
    --decoration-thickness: $siteHeader_text-decoration-thickness--mobile,
    color: $_text-color,
) !default;

$siteHeader_level_states--mobile: (
    default: $siteHeader_level_styles--mobile,
    current: (
        --decoration-thickness: $siteHeader_text-decoration-thickness--mobile,
        background-image: linear-gradient($_text-color, $_text-color),
        background-repeat: repeat-x,
        background-size: 100% var(--decoration-thickness),
        background-position: 0% 100%,
    ),
) !default;

$siteHeader_level_styles--secondary--mobile: (
    --decoration-thickness: $siteHeader_text-decoration-thickness--secondary--mobile,
    text-size: smallest,
    color: $_text-color,
) !default;

$siteHeader_level_states--secondary--mobile: (
    default: $siteHeader_level_styles--secondary--mobile,
    current: (
    ),
) !default;

//***** Global *****//

$siteHeader_overview_icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 8H13.5"/><path d="M9 3.5L13.5 8L9 12.5"/></svg>' !default;
$siteHeader_overview_icon_size: 16px !default;

@import "_defaultSiteHeader.helpers";
@import "_defaultSiteHeader.settings";
@import "_defaultSiteHeader.styles";

%siteHeader {
    $backdrop-color: $_page-color;

    &::after {
        // Underlay
        content: "";

        position: fixed;
        top: 0;
        left: 50%;
        z-index: -99;

        transform: translateX(-50%);

        display: block;
        width: 100vw;
        height: 100vh;

        @include styles($siteHeader_underlay_styles);

        pointer-events: none;
        visibility: hidden;
        opacity: 0;

        transition: opacity $siteHeader_drawer_transition-duration, visibility 0s $siteHeader_drawer_transition-duration;
    }

    &[data-visible="true"]::after,
    &[data-megamenu-visible="true"]::after {
        pointer-events: all;

        visibility: visible;
        opacity: 1;

        transition: opacity $siteHeader_drawer_transition-duration;
    }

    &-link {
        font-weight: $_font-weight--semibold;
    }

    &-nav.is-secondary &-link {
        font-weight: $_font-weight;
    }

    &-item {

        &-description {
            @include text-size(small);
            @include stack-spacing(small);
        }

        &-figure {
            display: none;
            @include stack-spacing(small, margin-bottom);
        }

        &.is-overview {

            span::after {
                content: map.get($siteHeader_label_overview, default);
                display: none;
            }

            @each $key, $label in $siteHeader_label_overview {

                @if $key != "default" {

                    html[lang="#{$key}"] & span::after {
                        content: " #{$label}";
                    }

                }

            }

        }

    }

    @include only-on-desktop(){
        $padding-block: 20px;
        $padding-block--secondary: 10px;
        $row-gap: $padding-block;

        --item-gap: var(--gg);
        --item-gap--secondary: 1.25em;

        padding-top: $padding-block--secondary;
        padding-bottom: $padding-block;

        &::after {
            // Underlay
            transition: opacity $siteHeader_dropdown_transition-duration, visibility 0s $siteHeader_dropdown_transition-duration;
        }

        &[data-megamenu-visible="true"]::after {
            transition: opacity $siteHeader_dropdown_transition-duration;
        }

        // Legacy support

        &-underlay {
            height: var(--siteHeader-height);
        }

        &-underlay + &-spacer {
            height: 0;
        }

        &-home {
            position: absolute;
            bottom: 0;
            padding-bottom: $padding-block;

            display: flex;
            align-items: flex-end;

            margin-bottom: 4px; // Optical alignment
        }

        &-level[data-level="1"] {
            row-gap: $row-gap;
        }

        &-nav:not(.is-secondary) {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-left: calc(#{$siteHeader_logo_width} + var(--item-gap));
        }

        &-nav.is-secondary {
            justify-self: end;

            min-height: $siteHeader_icon-size;

            display: flex;
            align-items: center;

            position: relative;
        }

        &-list[data-level="1"] {
            column-gap: var(--item-gap);
            row-gap: var(--sp-small);
            flex-wrap: wrap;
        }

        &-nav.is-secondary &-list[data-level="1"] {
            column-gap: var(--item-gap--secondary);
        }

        $dropdown_transition-duration: $_transition-duration--in;
        $dropdown_easing-function: sine;

        &-nav:not(.is-secondary) &-level[data-level="2"] {
            margin-top: $padding-block;
            border-top: none;
            z-index: -2;

            transform: translateY(-20px);
            visibility: hidden;

            transition: opacity $dropdown_transition-duration easing($dropdown_easing-function, in),
                        transform $dropdown_transition-duration easing($dropdown_easing-function, in),
                        visibility 0s $dropdown_transition-duration;
        }

        &[data-persistent="true"] &-nav:not(.is-secondary) &-link[data-level="1"][aria-expanded="true"] ~ &-level {
            transform: translateY(0);
            visibility: visible;

            transition: opacity $dropdown_transition-duration $dropdown_transition-duration easing($dropdown_easing-function, in),
                        transform $dropdown_transition-duration $dropdown_transition-duration easing($dropdown_easing-function, in),
                        visibility 0s 0s;
        }

        &-item[data-level="2"]:focus-within + &-item &-link {
            border-top-color: transparent !important;
        }

        &-item:not([data-type="megamenu"]) &-item-description {
            display: none;
        }

        &-link[data-level="1"][aria-expanded="true"] {
            @include state-styles($siteHeader_level-1_states, expanded);
        }

        &-nav:not(.is-secondary) &-list[data-level="2"] {
            padding-top: var(--bw);
        }

        &-link[data-level="2"] {

            > span {
                @include styles($siteHeader_level-1_styles);
            }

            @include action-states($siteHeader_level-1_states, $descendant: "> span");

        }

        &-item[data-level="2"] {

            &:not(:first-child)::before {
                content: "";

                display: block;

                margin: 0 $padding-block;
                border-top: $_border;
            }

        }

        //***** Secondary *****//

        $bleeding-block: $padding-block--secondary;
        $bleeding-inline: calc(1 * var(--item-gap--secondary));

        .is-secondary &-link[data-level="1"] {

            &::after {  // Expand clickable area
                content: "";

                display: block;

                position: absolute;
                inset: (-1 * $bleeding-block) calc(-1 * #{$bleeding-inline});
            }

        }

        &-nav.is-secondary &-level[data-level="2"] {
            margin-top: $padding-block--secondary;
        }

        &-nav.is-secondary &-item[data-level="2"] {

            &::before {
                border-width: $siteHeader_text-decoration-thickness;
            }

        }

        &-nav.is-secondary &-link[data-level="2"] {
            padding: $padding-block--secondary $bleeding-inline;
            border-width: $siteHeader_text-decoration-thickness;
        }

        //***** Icons *****//

        &-item[data-icon] > &-link {
            column-gap: 0;

            &::before { // Icon
                box-sizing: content-box;
                padding-right: .25em;
                background-position: center left;
                background-color: $backdrop-color; // Cover underline
            }

        }

        &-item[data-icon="search"] {
            width: $siteHeader_icon-size;
        }

        &-item[data-icon="search"] > &-link {

            &::before { // Icon
                padding-right: 0;
            }

            span {
                text-indent: 110%;
                overflow: hidden;
                white-space: nowrap;
            }

        }

    }

    @include only-on-small-desktop(){
        --item-gap: 2ch;
        --item-gap--secondary: 1.5ch;

        &-nav:not(.is-secondary) &-item {
            @include font-size(small);
            line-height: $_font-size * $_line-height;
        }

    }

    @include not-on-desktop(){
        $header_padding: var(--pp);

        &::after { // Underlay
            pointer-events: none !important;
        }

        &-home {

            &::after {
                content: "";
                @include styles($siteHeader_underlay_styles);

                display: block;
                position: absolute;
                inset: 0;

                pointer-events: none;
                visibility: hidden;
                opacity: 0;

                transition: opacity $siteHeader_drawer_transition-duration, visibility 0s $siteHeader_drawer_transition-duration;
            }

        }

        &[data-visible="true"] &-home {

            &::after {
                pointer-events: all;

                visibility: visible;
                opacity: 1;

                transition: opacity $siteHeader_drawer_transition-duration;
            }

        }

        &-item {
            padding: var(--bp-small) 0;

            &:not(.is-back-link) {
                border-bottom: 1px solid $_border-color;
            }

            &.is-back-link {
                padding-top: 0;
                padding-bottom: 0;
            }

            &:first-child {
                padding-top: calc(var(--bp-small) + var(--bw));
                border-top: var(--bw) solid $_border-color;
            }

        }

        &-item + &-item {
            margin-top: 0 !important;
        }

        &-item:has(> &-item-description) {
            position: relative;

            %siteHeader-link {
                position: static;

                &::after {
                    content: "";

                    display: block;

                    position: absolute;
                    inset: 0;
                    inset: var(--bp-small) 0;
                }

            }

        }

        &-item[data-icon] > &-link {
            justify-content: flex-start;

            span {
                flex-grow: 1;
            }

        }

        &-nav.is-secondary {
            @include stack-spacing(0);
        }

        &-nav.is-secondary &-item:first-child {
            margin-top: calc(-1 * var(--bw));
        }

        & ~ .siteFooter,
        .grid-container:has(&) .siteFooter {
            padding-bottom: calc(var(--sp-component) + #{$siteHeader_trigger_size});
        }

    }

}

@import "_defaultSiteHeader.styles--megamenu";

.siteHeader {

    &-item {

        &-description {
            @extend %siteHeader-item-description;
        }

        &-figure {
            @extend %siteHeader-item-figure;
        }
    }


}

//***** Primary *****//

$siteHeader_level-1_styles: (
    text-transform: uppercase,
    letter-spacing: .1em,
    text-decoration: underline,
    text-decoration-color: transparent,
    text-decoration-line: underline,
    text-decoration-skip-ink: auto,
    text-underline-offset: 4px,
    transition: $_transition-duration--in,
) !default;

$siteHeader_level-1_states: (
    default: $siteHeader_level-1_styles,
    hover: (
        color: $_action-color--hover,
        text-decoration-color: $_action-color--hover,
    ),
    focus: $_focus_styles,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_level-2_styles: map.merge(
    $siteHeader_level-1_styles,
    (
        font-weight: $_font-weight--bold,
        text-transform: none,
        letter-spacing: 0,
    )
) !default;

$siteHeader_level-2_states: (
    default: $siteHeader_level-2_styles,
    hover: (
        color: $_action-color--hover,
        text-decoration-color: $_action-color--hover,
    ),
    focus: $_focus_styles,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_level-3_styles: map.merge(
    $siteHeader_level-2_styles,
    (
        text-size: small,
        font-weight: $_font-weight,
        text-underline-offset: 3px,
        margin-left: 2ch,
    )
) !default;

$siteHeader_level-3_states: (
    default: $siteHeader_level-3_styles,
    hover: (
        color: $_action-color--hover,
        text-decoration-color: $_action-color--hover,
    ),
    focus: $_focus_styles,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_level-states: (
    1: $siteHeader_level-1_states,
    2: $siteHeader_level-2_states,
    3: $siteHeader_level-3_states,
) !default;

$siteHeader_dropdown_style: (
    background-color: $_backdrop-color,
    border-top: 2px solid $_action-border-color,
    box-shadow: var(--bs),
    padding: var(--bp-small, #{$_box_padding--small}) var(--bp, #{$_box_padding}),
    left: calc(-1 * var(--bp)),
    min-width: calc(100% + 2 * var(--bp, #{$_box_padding})),
    margin-top: -2px,
) !default;

//***** Secondary *****//

$siteHeader_link_styles--secondary: (
    text-size: small,
    text-decoration: underline,
    text-decoration-color: transparent,
    text-decoration-line: underline,
    text-decoration-skip-ink: auto,
    text-underline-offset: 4px,
    color: $_minor-color,
    transition: $_transition-duration--in,
) !default;

$siteHeader_link_states--secondary: (
    default: $siteHeader_link_styles--secondary,
    hover: (
        color: $_action-color--hover,
        text-decoration-color: $_action-color--hover,
    ),
    focus: $_focus_styles,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_level-2_styles--secondary: (
    font-weight: $_font-weight,
    text-size: small,
) !default;

$siteHeader_dropdown_style--secondary: (
    left: 50%,
    transform: translateX(-50%),
) !default;

//***** Primary *****//

$siteHeader_drawer_width: 80% !default;
$siteHeader_drawer_min-width: 280px !default;
$siteHeader_drawer_max-width: 360px !default;

$siteHeader_drawer_background-color: $_backdrop-color !default;
$siteHeader_drawer_transition-duration: .2s !default;

$siteHeader_trigger_size: 48px !default;

$siteHeader_trigger_icon_stroke-width: 1.5 !default;

$siteHeader_trigger_icons: (
    open: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_trigger_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25 9H7"/><path d="M25 16H7"/><path d="M25 23H7"/></svg>',
    close: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_trigger_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 4L19.5 19.5M4 19.5L19.5 4"/></svg>',
) !default;

$siteHeader_level_styles--mobile: (
    text-size: default,
    color: $_text-color,
    text-decoration: underline,
    text-decoration-color: transparent,
    text-decoration-line: underline,
    text-decoration-skip-ink: auto,
    text-underline-offset: 4px,
    transition: $_transition-duration--in,
) !default;

$siteHeader_level_states--mobile: (
    default: $siteHeader_level_styles--mobile,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_title_styles: (
    text-size: large,
    font-weight: $_font-weight--bold,
) !default;

$siteHeader_back-link_styles: (
    text-size: small,
    color: $_text-color,
    margin-bottom: var(--sp),
    order: -1,
) !default;

$siteHeader_sub-level-marker_icon_stroke-width: 1.5 !default;

$siteHeader_sub-level-marker_icon: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_sub-level-marker_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 1.5L9 6L4 10.5"/></svg>' !default;

$siteHeader_sub-level-marker_styles: (
    width: 24px,
    height: 24px,
    margin-top: -.1em,
    margin-left: .6em,
    background: $_action_background-color svg-url($siteHeader_sub-level-marker_icon, $_action-foreground-color) center center no-repeat,
    border-radius: 50%,
    transform: translateX(0),
    transition-duration: $_transition-duration,
) !default;


//***** Secondary *****//

$siteHeader_level_styles--secondary--mobile: (
    text-size: smallest,
    text-decoration: underline,
    text-decoration-color: transparent,
    text-decoration-line: underline,
    text-decoration-skip-ink: auto,
    text-underline-offset: 3px,
    color: $_minor-color,
) !default;

$siteHeader_level_states--secondary--mobile: (
    default: $siteHeader_level_styles--secondary--mobile,
    current: (
        text-decoration-color: $_text-color,
    ),
) !default;

$siteHeader_icon_stroke-width: 1 !default;

$siteHeader_icons: (
    language: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="7.5"/><ellipse cx="10" cy="10" rx="3" ry="7.5"/><path d="M2.5 10H17.5"/></svg>',
    search: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="{{color}}" stroke-width="#{$siteHeader_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="8.5" cy="8.5" r="6"/><path d="M13 13L17.5 17.5"/></svg>',
) !default;

$siteHeader_icon-size: 20px !default;

@import "_defaultSiteHeader.settings--desktop";
@import "_defaultSiteHeader.settings--mobile";

%siteHeader {

    @include only-on-desktop(){

        &-level[data-level="1"] {
            display: grid;
            @include stack-spacing(default, row-gap);
            grid-template-columns: auto;
            grid-template-areas:
                "secondary"
                "primary";
        }

        &-nav {
            grid-area: primary;
        }

        &-nav.is-secondary {
            grid-area: secondary;
        }

        &-trigger,
        &-item.is-back-link,
        &-item.is-overview:not([data-level="2"]) {
            display: none;
        }

        &-item[data-icon] > &-link {

            &::after { // Expand clickable area to cover icon
                content: "";
                display: block;

                position: absolute;
                inset: 0;
            }

        }

        &-list {
            @include stack-spacing(0);

            padding-left: 0;
            list-style: none;

            &[data-level="1"] {
                display: flex;
                column-gap: var(--gg);
            }

        }

        &-link {
            color: inherit;
            text-decoration: none;

            display: flex;

            cursor: pointer;
            white-space: nowrap;
        }

        &-nav.is-secondary &-link[data-level="1"] {
            @include styles($siteHeader_link_styles--secondary);
            @include action-states($siteHeader_link_states--secondary);
        }

        &-nav.is-secondary &-item[data-level="1"][data-current="true"] > &-link:not(:hover):not(:focus):not(:focus-visible):not(:active),
        &-nav.is-secondary &-item[data-level="1"][data-current-ancestor="true"] > &-link:not(:hover):not(:focus):not(:focus-visible):not(:active) {
            @include state-styles($siteHeader_link_states--secondary, current);
        }

        //***** Level 1 *****//

        @include siteHeader-level-states(1);

        //***** Level 2 *****//

        &-item {
            position: relative;
        }

        &-level[data-level="2"] {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1;

            @include styles($siteHeader_dropdown_style);

            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            transition: opacity $_transition-duration--in,
                        visibility 0s $_transition-duration--in;
        }

        &-item[data-level="1"]:last-child &-level[data-level="2"] {
            left: auto;
            right: map.get($siteHeader_dropdown_style, left);
        }

        &[data-persistent="true"] &-link[data-level="1"][aria-expanded="true"] ~ &-level {
            opacity: 1;
            visibility: visible;
            pointer-events: all;

            transition: opacity $_transition-duration--in,
                        visibility 0s 0s;
        }

        &:not([data-persistent="true"]) &-item[data-level="1"]:hover &-level[data-level="2"] {
            opacity: 1;
            visibility: visible;
            pointer-events: all;

            transition: opacity $_transition-duration--in,
                        visibility 0s 0s;
        }

        &-item[data-level="2"][data-sublevel="true"] + &-item {
            @include stack-spacing(small);
        }

        @include siteHeader-level-states(2);

        &-item[data-level="2"]:first-child &-link:not([data-sublevels="true"]) {
            border-top: none;
        }

        //***** Level 3 *****//

        &-item {
            position: relative;
        }

        @include siteHeader-level-states(3);

        //***** Secondary *****//

        .is-secondary &-list[data-level="1"] {
            display: flex;
            column-gap: var(--gg);
        }

        .is-secondary &-level[data-level="2"] {
            @include styles($siteHeader_dropdown_style--secondary);
        }

        .is-secondary &-link[data-level="2"] {
            @include styles($siteHeader_level-2_styles--secondary);
        }

    }

}

%siteHeader-item[data-type="megamenu"] {

    @include only-on-desktop(){
        $padding: var(--bp-large);
        $marker_size: 24px;
        $drawer_width: 20%;

        $transition-duration: $siteHeader_dropdown_transition-duration;
        $easing-function: cubic;

        position: static;

        %siteHeader {

            &-level:not([data-sublevels="true"]) %siteHeader-list[data-level="2"],
            &-list[data-level="3"] {
                @include stack-spacing(default, margin-bottom);
                @include grid-flowbox($min-width: 300px);
            }

            &-level[data-level="2"] {
                margin-top: 0;
                border-top: none;
                box-shadow: none;
                min-width: 0;

                position: absolute !important;
                left: 0 !important;
                right: 0 !important;
                z-index: -2;

                padding: 0 var(--pp);

                overflow: visible;

                @include full-width-backdrop();

                &::before {
                    @include box-shadow(small);
                }

            }

            &-level[data-level="2"]:not([data-sublevels="true"]) > %siteHeader-list,
            &-level[data-level="3"] {
                max-height: calc(100vh - var(--siteHeader-height));
                overflow-y: auto;
                overscroll-behavior: contain;

                padding-left: $_focus_border-width;
                margin-left: (-1 * $_focus_border-width);
            }

            &-level[data-level="2"]:not([data-sublevels="true"]) > %siteHeader-list {
                padding-right: $padding;
                margin-right: calc(-1 * $padding - var(--scrollbar-width, 0));

                @supports (scrollbar-color: transparent transparent) or (scrollbar-width: none){
                    margin-right: calc(-1 * $padding);
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                }

            }

            &-list[data-level="2"] {
                min-height: inherit;
            }

            &-list[data-level="2"],
            &-list[data-level="3"] {
                padding-top: $padding;
                padding-bottom: $padding;
            }

            &-level:not([data-sublevels="true"]) %siteHeader-item:not(.is-overview) {
                padding-bottom: var(--sp-small);
                border-bottom: $siteHeader_text-decoration-thickness solid $_border-color;
            }

            &-item {

                &::before {
                    display: none;
                }

                .figure {
                    @include stack-spacing(0);

                    transition: inherit;

                    border-radius: var(--br);
                    overflow: hidden;

                    transition: $_transition-duration transform;

                    img {
                        --ratio: #{$teaserCard_image_ratio} / 1;
                    }

                    &-image {
                        transform: scale(1);
                        transition: inherit;
                    }

                }

            }

            &-item:hover > %siteHeader-item-figure {

                .figure-image {
                    transform: scale($figure_action_scale);
                    transition-duration: $_transition-duration--in;
                }

            }

            &-item.is-overview {
                display: block;
                grid-column: 1 / -1;

                margin-bottom: -.5em;

                > %siteHeader-link {

                    &::after {
                        content: "";

                        display: block;
                        width: $siteHeader_overview_icon_size;
                        height: $siteHeader_overview_icon_size;

                        background: svg-url($siteHeader_overview_icon) center center no-repeat;
                        background-size: contain;

                        mask-image: svg-url($siteHeader_overview_icon, black);
                        mask-repeat: no-repeat;
                        mask-position: center center;
                        mask-size: contain;

                        @supports (mask-image: url()) {
                            background-image: none !important;
                            background-color: currentcolor;
                        }

                    }

                }

                > %siteHeader-link:not([data-sublevels="true"]) {
                    @include text-size(small);
                    font-weight: $_font-weight;

                    display: inline-flex;
                    align-items: center;
                    column-gap: .5ch;

                    box-shadow: none !important; // Quickfix for divided focus box

                    > span {
                        @include state-styles($siteHeader_level-1_states);
                        font-weight: inherit;
                    }

                    @include action-states($siteHeader_level-1_states, $descendant: "> span");

                }

            }

            &-level[data-level="2"]:not([data-sublevels="true"]) %siteHeader-item.is-overview[data-level="2"],
            &-item.is-overview[data-level="3"] {

                > %siteHeader-link:not([data-sublevels="true"]) {
                    @include text-size(x-large);
                    font-weight: $_font-weight--bold;

                    &::after {
                        width: 24px;
                        height: 24px;
                    }
                }

            }

            // Overview link styled as CTA

            &-level[data-level="2"][data-sublevels="true"] %siteHeader-item.is-overview[data-level="2"] {
                order: 999;
                margin-top: calc(var(--bp-large) - var(--sp));

                > %siteHeader-link {
                    // Sorry, but, we have to hard code the button styles because we can’t expand the placeholder class in a media query
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    column-gap: $button_gutter;

                    vertical-align: middle;
                    text-align: center;
                    text-decoration: none;

                    cursor: pointer;
                    user-select: none;

                    outline: transparent;

                    @include styles($button-styles);
                    @include styles($button-styles--xsmall);
                    @include button-states();
                    @include button-states($button-states--secondary);

                    @include stack-spacing(0);

                    padding: $button_padding;
                    display: inline-flex;

                    > span {
                        background-image: none;
                        box-shadow: none !important;

                        &::after {
                            display: inline;
                        }

                    }

                }

            }

            &-link {

                &[data-level="2"]:not([data-sublevels="true"]),
                &[data-level="3"]:not([data-sublevels="true"]) {
                    padding: 0;
                    border: 0;

                    background: transparent;
                    display: inline-block;

                    @include text-size();
                    font-weight: $_font-weight--bold;

                    white-space: normal;
                    text-wrap: balance;

                    &:hover {
                        background: inherit !important;
                    }

                }

            }

            &-item:not(.is-overview):not([data-sublevel="true"]) > %siteHeader-link:not([data-sublevels="true"]) {

                &[data-level="2"],
                &[data-level="3"] {
                    display: flex;
                    align-items: center;
                    column-gap: .5ch;
                    justify-content: space-between;

                    box-shadow: none !important;

                    &::before {
                        content: "";

                        flex-shrink: 0;

                        display: block;
                        width: $marker_size;
                        height: $marker_size;

                        order: 99;

                        background: svg-url($siteHeader_overview_icon) center center no-repeat;
                        background-color: $_action-background-color;
                        border-radius: 100vmax;

                        transition: background-color $_transition-duration;
                    }

                    &:hover::before {
                        background-image: svg-url($siteHeader_overview_icon, $color: $_action-foreground-color--hover);
                        background-color: $_action-background-color--hover;
                        transition-duration: $_transition-duration--in;
                    }

                    &::after {
                        content: "";

                        display: block;

                        position: absolute;
                        inset: 0;
                    }

                    > span {
                        background-image: none !important;
                        box-shadow: inherit;
                    }

                    &:not([disabled]):not([aria-disabled=true]):focus-visible::after {
                        @include styles($_focus_styles);
                    }

                }

            }

            &-item {

                &-description,
                &-figure {
                    display: block;
                }

            }

            &-item > %siteHeader-item-description {
                padding-right: (1.5 * $marker_size);
            }

            //***** With third level *****//

            &-level[data-sublevels="true"] %siteHeader {

                &-list[data-level="2"] {
                    width: $drawer_width;

                    display: flex;
                    flex-direction: column;
                    @include stack-spacing(default, row-gap);

                    position: relative;
                    z-index: 1;

                    &::before {
                        $indent: calc((100% + var(--gg)) * .25 - var(--gg));
                        $indent: (.5 * ($_page_content_max-width - $_page_max-width));

                        content: "";

                        display: block;

                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: $indent;
                        right: calc(-1 * #{$padding});

                        z-index: -1;

                        background-color: get-themed-property(background-color, dark);
                    }

                }

                &-item[data-level="2"] {
                    @include stack-spacing(0);

                    &[data-level="2"]:not(.is-overview) {
                        position: static;
                    }

                }

                &-link[data-level="2"] {
                    color: get-themed-property(color, dark);
                }

                &-item[data-level="2"] > %siteHeader-link {
                    @include apply-theme(dark);
                }

                &-item[data-level="2"] > %siteHeader-link:not([data-sublevels="true"]) {
                    background-color: transparent;
                    width: 100%;
                    text-align: left;
                }

                &-item[data-level="2"].is-overview > %siteHeader-link {

                    &::after {
                        background-image: svg-url($siteHeader_overview_icon, $color: get-themed-property(color, dark));
                    }

                }

                &-item[data-level="2"]:not(.is-overview) > %siteHeader-link:not([data-sublevels="true"]) {
                    $marker_size: 42px;

                    display: block;
                    @include text-size();

                    position: relative;

                    background: linear-gradient($_border-color, $_border-color) no-repeat !important;
                    background-size: 100% $siteHeader_text-decoration-thickness !important;
                    background-position: left 100% !important;

                    &::after { // Marker
                        content: "";

                        display: block;
                        width: $padding;
                        height: $padding;

                        position: absolute;
                        top: 50%;
                        left: 100%;
                        z-index: -1;

                        margin-left: -1px;
                        transform: translate(0, -50%);

                        border: calc(.5 * $padding) transparent solid;
                        border-left-color: get-themed-property(background-color, dark);

                        pointer-events: none;

                        transition: transform $transition-duration ease-in-out;
                    }

                    > span {
                        @include state-styles($siteHeader_level-1_states);
                        display: block;
                    }

                    @include action-states($siteHeader_level-1_states, $descendant: "> span");

                    &[aria-expanded="true"] {

                        &::after {
                            opacity: 1;
                            transform: translate($padding, -50%);
                        }

                        > span {
                            @include state-styles($siteHeader_level-1_states, hover);
                        }

                    }

                }

            }

                //** Third level **//

            &-level[data-level="3"] {
                position: absolute;
                top: 0;
                left: calc(100% + $padding);
                right: calc(#{-100% * (math.div(100%, $drawer_width) - 1)} - $padding - var(--scrollbar-width, 0));

                padding-left: calc(var(--sp) + $padding);
                padding-right: $padding;

                transform: translateX(-50px);

                opacity: 0;
                visibility: hidden;
                pointer-events: none;

                transition: opacity $transition-duration easing($easing-function, in),
                            transform $transition-duration easing($easing-function, in),
                            visibility 0s $transition-duration;

                @supports (scrollbar-color: transparent transparent) or (scrollbar-width: none){
                    right: calc(#{-100% * (math.div(100%, $drawer_width) - 1)} - $padding);
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                }

            }

            &-link[data-level="1"][aria-expanded="true"] ~ %siteHeader-level[data-level="2"] %siteHeader-link[data-level="2"][aria-expanded="true"]:not([data-sublevels="true"]) ~ %siteHeader-level[data-level="3"] {
                transform: translateX(0);

                opacity: 1;
                visibility: visible;
                pointer-events: all;

                transition-timing-function: easing($easing-function, out);
                transition-delay: $transition-duration;

                transition: opacity $transition-duration $transition-duration easing($easing-function, out),
                            transform $transition-duration $transition-duration easing($easing-function, out),
                            visibility 0s 0s;

            }

                // Remove animation on close

            &-link[data-level="1"]:not([aria-expanded="true"]) ~ %siteHeader-level[data-level="2"] %siteHeader-link[data-level="2"][aria-expanded="true"]:not([data-sublevels="true"]) ~ %siteHeader-level[data-level="3"] {
                transition-delay: $transition-duration;
            }

        }

    }

}

%siteHeader {

    @include not-on-desktop(){

        &-drawer {
            width: $siteHeader_drawer_width;
            max-width: $siteHeader_drawer_max-width;
            min-width: $siteHeader_drawer_min-width;
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);

            margin-left: auto;
            margin-right: 0;

            transform: translateX(100%);

            background-color: $siteHeader_drawer_background-color;

            transition: $siteHeader_drawer_transition-duration ease-in;
            transition-property: transform, opacity;

            position: relative;

            &::before { // Bleeding for bounce effect
                content: "";

                display: block;
                width: 200%;
                height: 100vh;

                position: absolute;
                left: 0;
                right: 0;

                z-index: -1;

                background-color: inherit;
            }

            &::after { // Shadow
                $intensity: .1;
                $color: $_BLACK;

                content: "";

                display: block;
                width: 16px;
                height: 100vh;

                position: absolute;
                top: 0;
                right: 100%;

                z-index: -1;

                background: linear-gradient(to left, rgba($color, $intensity), rgba($color, .3 * $intensity) 50%, rgba($color, 0));
                opacity: 0;
            }

        }

        &[data-visible="true"] &-drawer {
            pointer-events: all;

            transform: translateX(0%);
            opacity: 1;

            transition-timing-function: cubic-bezier(.4, .6, .6, 1.1);

            &::after {
                opacity: 1;
            }

        }

        &[data-persistent="true"] &-drawer {
            transition-timing-function: ease-in-out;
        }

            //***** Trigger *****//

        &-trigger {
            $icon--close: map-get($siteHeader_trigger_icons, close);
            $icon--open: map-get($siteHeader_trigger_icons, open);
            $trigger_bleeding: 6px;

            pointer-events: all;

            position: absolute;
            right: var(--pp);
            bottom: var(--pp);
            z-index: 10;

            display: block;
            width: $siteHeader_trigger_size;
            height: $siteHeader_trigger_size;

            margin-top: (-1 * $trigger_bleeding);
            margin-right: (-1 * $trigger_bleeding);

            background-color: $_action-background-color;
            border-radius: 100vmax;
            @include box-shadow();

            text-indent: 200%;
            white-space: nowrap;
            overflow: hidden;

            &::before,
            &::after {
                content: "";
                display: block;

                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;

                background: center center no-repeat;
                transition: $_transition-duration--in;
                transition-property: opacity, transform;
            }

            &::before {
                background-image: svg-url($icon--open, $_action-foreground-color);
                opacity: 1;
                transform: rotate(0);
            }

            &::after {
                background-image: svg-url($icon--close, $_action-foreground-color);
                opacity: 0;
                transform: rotate(45deg);
            }

            [data-menu-visible="true"] &::before {
                opacity: 0;
                transform: rotate(-45deg);
            }

            [data-menu-visible="true"] &::after {
                opacity: 1;
                transform: rotate(0);
            }

        }

            //***** Content *****//

        &-content {
            display: flex;
            flex-direction: column;

            height: 100%;
            overflow: hidden;

            @include box-padding();
            padding-top: 0;
            padding-bottom: 0;

            transition: inherit;

            position: relative;

            &::after { // Fade on bottom
                content: "";

                position: absolute;
                left: 0;
                @include box-padding(default, right); // Don’t cover scrollbar
                bottom: 0;

                z-index: 10;

                display: block;
                @include stack-spacing(component, height);

                background-color: $siteHeader_drawer_background-color;
                mask-image: linear-gradient(to top, rgba(black, .8) 33%, rgba(black, 0));
            }

        }

        &[data-visible="true"] &-nav {
            opacity: 1;
        }

        &-level {
            position: absolute;
            top: 0;
            left: 0;

            display: flex;
            flex-direction: column;

            height: 100%;
            width: 100%;

            @include box-padding();
            @include stack-spacing(component, padding-bottom);

            margin: 0;

                // Animation

            opacity: 0;
            visibility: hidden;
            transform: translateX(100%);
            z-index: 3;

            transition: transform $siteHeader_drawer_transition-duration, opacity $siteHeader_drawer_transition-duration, visibility 0s $siteHeader_drawer_transition-duration;


            &[data-level="1"] {
                transform: translateX(0);
            }

            &[data-current-level="true"] {
                opacity: 1;
                visibility: visible;
                z-index: 4;

                overflow-x: hidden; // FIXME: When browsing back, level disappears suddenly instead of being scrolled to right
                overflow-y: auto;

                overscroll-behavior-y: contain;
                scrollbar-width: thin;

                transition-delay: 0s;
            }

            &:not([data-current-level-ancestor="true"]):not([data-current-level="true"]) {
                overflow-y: hidden;
            }

            &[data-current-level-ancestor="true"] {
                opacity: 1;
                visibility: visible;
                transform: translateX(-100%);

                transition-delay: 0s;
            }

            &[data-current-level-ancestor="true"] %siteHeader-level[data-current-level-ancestor="true"] {
                transform: translateX(0);
            }

        }

        &-list {
            flex: 1 0 auto;

            list-style: none;
            padding: 0;

            @include stack-spacing(0);

            display: flex;
            flex-direction: column;

                // Label

            &[data-title] {

                &::before {
                    content: attr(data-title);

                    @include stack-spacing(default, margin-bottom);
                    @include styles($siteHeader_title_styles);
                }

            }

        }

        &-item + &-item{
            @include stack-spacing();
        }

        &-item.is-overview %siteHeader-link > span::after {
            display: inline;
        }

        &-item.is-back-link {
            $icon_height: 16px;
            $icon_width: $icon_height;

            @include stack-spacing(0);

            @include styles($siteHeader_back-link_styles);

            button {
                display: flex;
                align-items: center;

                cursor: pointer;

                &::before { // Icon
                    $icon: '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 2L1 6M1 6L5.5 10M1 6H10.5" stroke="{{color}}" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>';

                    content: "";

                    display: block;
                    width: $icon_width;
                    height: $icon_height;

                    line-height: 0;
                    vertical-align: middle;

                    margin-right: .2em;

                    background: svg-url($icon) center center no-repeat;
                }

            }

        }

            // Push first level down to compensate missing back button

        &-level[data-level="1"] {

            &::before {
                content: "\00a0";
                display: block;

                @include styles($siteHeader_back-link_styles);

                //@include stack-spacing(default, margin-bottom);
            }

        }

        &-link {
            width: 100%;

            display: flex;
            justify-content: space-between;
            align-items: center;

            text-decoration: none;

            position: relative;

            > span {
                @include styles($siteHeader_level_styles--mobile);
                @include state-styles($siteHeader_level_states--mobile);
            }

        }

        &-item[data-current="true"] > &-link,
        &-item[data-current-ancestor="true"] > &-link {

            > span {
                @include state-styles($siteHeader_level_states--mobile, current);
            }

        }

            // Marker for sub level

        &-item[data-sublevel="true"] > &-link {

            &::after { // Marker for sublevel
                content: "";
                display: block;

                @include styles($siteHeader_sub-level-marker_styles);
            }

        }

        //***** Secondary *****//

        &-nav.is-secondary {
            @include stack-spacing(component);
        }

        &-nav.is-secondary &-item + &-item {
            @include stack-spacing(small);
        }

        &-nav.is-secondary &-link {

            > span {
                @include styles($siteHeader_level_styles--secondary--mobile);
                @include action-states($siteHeader_level_states--secondary--mobile);
            }

        }

        &-nav.is-secondary &-item[data-current="true"] > &-link,
        &-nav.is-secondary &-item[data-current-ancestor="true"] > &-link {

            > span {
                @include state-styles($siteHeader_level_states--secondary--mobile, current);
            }

        }

    }

}

@import "_defaultSiteHeader.styles--desktop";
@import "_defaultSiteHeader.styles--mobile";

%siteHeader {

    @media print {
        display: none;
    }

    &-link {
        text-align: inherit;
    }

    //***** Icons *****//

    &-item[data-icon] > &-link {
        display: flex;
        column-gap: .25em;

        &::before { // Icon
            content: "";

            display: block;
            flex: 0 0 $siteHeader_icon-size;
            width: $siteHeader_icon-size;
            height: $siteHeader_icon-size;

            position: relative;
            top: 1px;

            background: transparent center center no-repeat;
        }

    }

    @each $icon, $data in $siteHeader_icons {

        &-item[data-icon="#{$icon}"] > &-link::before {
            background-image: svg-url($data);
        }

    }

}

.siteHeader {

    &-content {
        @extend %siteHeader-content;
    }

    &-drawer {
        @extend %siteHeader-drawer;
    }

    &-item {
        @extend %siteHeader-item;
    }

    &-level {
        @extend %siteHeader-level;
    }

    &-link {
        @extend %siteHeader-link;
    }

    &-list {
        @extend %siteHeader-list;
    }

    &-nav {
        @extend %siteHeader-nav;
    }

    &-trigger {
        @extend %siteHeader-trigger;
    }

    &-underlay { // Deprecated
        @extend %siteHeader-underlay;
    }

}