:root {
    --columns-gap-container: 2rem;
    --font-color-default: black;
    --font-size-app-name: 0.75rem;
    --font-size-top-bar: 0.75rem;
    --font-size-main-nav: 1.25rem;
    --font-size-functions-icon: 1.625rem;
    --font-weight-extra-bold: 800;
    --grid-template-column-container: repeat(16, minmax(0, 1fr));
    --header-height: 120px;
    --height-bottom-bar: 90px;
    --height-top-bar: 30px;
    --line-height-app-name: 0.75rem;
    --line-height-nav-badge: 0.5rem;
    --max-width-container: 1504px;
    --spacing-x-container: 1rem;
    --spacing-x-lang-switches: 0.75rem;
    --spacing-x-slotted: 3.5rem;
}

header {
    height: var(--header-height);
    width: 100vw;
    background-color: var(--background);
    box-shadow: var(--shadow);
    color: var(--font-color-default);
    position: fixed;
    z-index: 999;

    :focus-visible {
        outline: solid 2px var(--telekom-color-functional-focus-inverted) !important;
    }

    /* Remove default styles for the items below */
    li, ul, a {
        all: unset;
    }

    .header-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--header-height);
        width: var(--header-height);
        margin-right: 100px;
        background: var(--telekom-color-primary-standard);

        & img {
            height: 120px;
            min-height: 120px;
            max-height: 120px;
        }
    }

    .header-container {
        box-sizing: content-box;
        display: flex;
        position: relative;
        height: var(--header-height);
        max-width: var(--max-width-container);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--spacing-x-container);
        padding-right: var(--spacing-x-container);

        .body {
            padding: 0;
            padding-left: 1rem;
            display: block;
            flex-basis: 0;
            flex-grow: 1;
            flex-shrink: 1;
            grid-column-end: span 14;
            grid-column-start: 3;
            margin-left: 0;

            .top-bar {
                align-items: end;
                display: flex;
                width: 100%;
                height: var(--height-top-bar);
                font-size: var(--font-size-top-bar);

                .top-app-name {
                    display: block;
                    margin-right: var(--columns-gap-container);
                    height: inherit;

                    .app-name-text {
                        align-items: flex-end;
                        display: inline-flex;
                        font-size: var(--font-size-app-name);
                        font-weight: var(--font-weight-extra-bold);
                        line-height: var(--line-height-app-name);
                        color: var(--telekom-color-primary-standard);
                        letter-spacing: 0.02em;
                        text-decoration: none;
                        height: inherit;
                    }
                }

                .top-body {
                    display: inline-flex;
                    flex: 1 1 0;
                    justify-content: flex-end;
                    height: inherit;

                    .lang-switcher {
                        display: inline-flex;
                        align-items: flex-end;
                        gap: var(--spacing-x-lang-switches);
                        cursor: pointer;

                        button {
                            all: unset;
                        }

                        .active {
                            font-weight: var(--font-weight-extra-bold);
                        }
                    }
                }
            }

            .bottom-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: var(--height-bottom-bar);

                .main-nav, .functions {
                    height: inherit;
                    display: flex;
                    flex-direction: row;
                }

                    .main-nav .steam-nav-menu {
                        margin-inline-end: var(--spacing-x-slotted);
                    }

                .functions {
                    .steam-nav-menu:not(:last-child) {
                        margin-inline-end: 1.5rem;
                    }

                    .steam-nav-menu-dropdown {
                        /*Required to align the dropdown content to the left*/
                        right: 0;
                    }
                }

                .disabled {
                    color: grey;
                    cursor: not-allowed
                }
            }

            .steam-nav-menu {
                align-items: center;
                cursor: pointer;
                height: inherit;
                margin-top: 0;
                margin-bottom: 0;

                &:hover, &:focus-within {
                    border-bottom: 2px solid;
                    border-bottom-color: var(--telekom-color-primary-hovered);
                    color: var(--telekom-color-primary-hovered);
                }

                button {
                    all: unset;
                    height: inherit;
                    font-weight: var(--font-weight-extra-bold);
                    font-size: var(--font-size-main-nav);
                }

                .steam-nav-menu-dropdown {
                    background: var(--background);
                    box-shadow: var(--shadow);
                    display: none;
                    flex-direction: column;
                    gap: 0;
                    height: auto;
                    position: absolute;
                    z-index: 999;

                    &.visible {
                        min-width: 2rem;
                        display: flex;
                        flex-direction: column;
                    }
                }
            }

            .steam-nav-menu-item {
                height: 2.75rem;
                align-content: center;
                padding: 0 1.5rem 0 1.5rem;
                color: var(--font-color-default);

                &:hover, &:focus {
                    color: var(--telekom-color-primary-hovered);
                }

                a {
                    align-items: center;
                    display: flex;
                    height: inherit;
                    text-decoration: none;
                    color: inherit;
                    /*Set padding if the icon is present */
                    span:not(:first-child):not(.nav-badge) {
                        padding-left: 0.75rem;
                    }

                    &.active {
                        font-weight: var(--font-weight-extra-bold);
                        color: var(--telekom-color-primary-hovered);
                    }
                }
            }
        }
    }
}

/* Offsets the main content by the headers height */
.main {
    padding-top: var(--header-height);
}

/* Used not only in the header, but also on tabs */
.nav-badge {
    height: var(--line-height-nav-badge);
    min-width: var(--line-height-nav-badge);
    background-color: var(--telekom-color-primary-standard);
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
    margin-right: calc(var(--line-height-nav-badge) * -1);
    top: calc(var(--line-height-nav-badge) * -1);
    right: 0;
    position: relative;
}