header.scss

#main-header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    box-sizing: border-box;
    padding-top: $bar-bottom-container-height;
    margin-bottom: 10px;
}
#top-bar {
    background-color: var(--base-color);
    color: var(--contrast-content-white);
    border-bottom: 1px solid var(--brand-color-darker);
    height: $bar-bottom-container-height;
    width: 100%;
    min-width: $site-width;

    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: 0 $page-margin;
    transform: translate(0, 0) !important; // We need !important due to the horizontal scroll handler
    position: fixed;
    top: 0;
    z-index: 1001;

    #site-title {
        flex: 1;
        color: var(--white);
        margin-left: 0;
        z-index: 1002;
        line-height: $bar-bottom-container-height;
        white-space: nowrap;
    }

    #header-links {
        flex: 0 1 auto;
        justify-self: flex-end;

        > ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style-type: none;
            height: 40px;
            gap: 20px;

            > li {
                margin: 2px;

                > a {
                    color: var(--white);
                    margin: 0 6px;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

#navigation-level-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    background-color: var(--color--main-navigation-background);
    border-bottom: 1px solid var(--color--main-navigation-border);
    box-sizing: border-box;
    min-width: $site-width;
    width: 100%;
    height: $header-height;
    z-index: 3;

    // #navigation-level-1-items -> navigation.scss

    #top-logo {
        flex: 0 1 auto;

        &.studip-logo {
            @include hide-text();
            @include retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo@2x.png', 130px, 92px);
            background-repeat: no-repeat;
            background-image: none, url("#{$image-path}/logos/studip4-logo.svg");
            background-size: 130px 92px;
            background-position: left;
            display: block;
            width: 130px;
            margin-right: 30px;
        }
    }
}

#current-page-structure {
    display: flex;
    position: relative;
    width: 100%;
    min-width: $site-width;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: stretch;
    justify-content: flex-start;
    flex-grow: 1;
    background-color: var(--color--main-navigation-background);

    &.oversized {
        overflow: visible;
    }

    .colorblock {
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 48px;
    }

    .contextless & {
        .colorblock {
            width: 0;
        }
    }

    #context-title {
        font-size: 24px;
        color: var(--color--font-primary);
        height: 30px;
        padding: 10px 15px 5px 15px;
        margin-bottom: 10px;
        max-height: 30px;
        overflow: hidden;
        background-color: var(--color--main-navigation-background);

        > .context-avatar {
            margin: 0 5px 0 -6px;
            vertical-align: top;
            max-width: 36px;
            max-height: 36px;
        }

        > .course-type {
            font-style: normal;
        }
        > .course-name {
            font-weight: 700;
        }
        > .course-semester {
            font-style: oblique;
        }
    }

    .tabs_wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: var(--color--main-navigation-background);
        color: var(--color--font-primary);
        min-height: ceil($font-size-navigation2 * 2.25); // 16px * 2.25 = 36px
        border-bottom: 1px solid var(--color--main-navigation-border);
        padding-left: $page-margin;
        padding-right: $page-margin;
    }

    #tabs {
        transition: margin-left;
        transition-duration: var(--transition-duration);
        transition-delay: 500ms;
    }

    > ul {
        flex: 1 1 auto;
    }
}

#responsive-menu,
#site-title {
    flex: 0 0 auto;
    z-index: 2;
}

#site-title {
    padding: 0 5px 0 0;
}

#avatar-menu-container {
    display: inline-flex;

    &.header_avatar_container {
        align-items: end;
        flex: 0;
    }

    #avatar-menu {
        height: 30px;
        margin: 0;
        vertical-align: text-bottom;
        z-index: 1003;

        .action-menu.avatar-menu {
            z-index: 1002;

            .action-menu-icon {
                border: 1px solid var(--dark-gray-color-40);
                background-color: var(--dark-gray-color-5);
                height: 28px;
                margin: 0 22px 0 0;
                position: relative;
                width: 28px;
                z-index: 1;

                img {
                    height: 100%;
                    width: 100%;
                }

                // Add arrow on the right
                @include icon(after, arr_1down, info_alt);

                &::after {
                    background-position: center;
                    background-repeat: no-repeat;
                    padding: 4px 6px;
                    position: absolute;
                    left: 100%;
                    top: 0;
                }

                #notification-container + & {
                    border-left: 0;
                }
            }

            .action-menu-title {
                margin: 0 0 0 10px;
            }

            .action-menu-content {
                position: absolute;
                top: 41px;
                right: 0;
                background: var(--white);
                box-shadow: 1px 1px 1px var(--dark-gray-color-60);
                text-align: left;
                white-space: nowrap;

                a:link,
                a:visited {
                    color: var(--base-color);
                }
                a:hover,
                a:active {
                    color: var(--active-color);
                }

                div {
                    color: var(--black);
                }
            }
        }
    }
}

// Fix header covering relevant other areas
// $see https://gitlab.studip.de/studip/studip/-/issues/1019
html {
    scroll-padding-top: calc($bar-bottom-container-height + 1em);
}