.main-menu {
    background-color: var(--anresis-color-white-background);
    height: 100%;
    margin-inline-end: auto;  
    flex-grow: 1;

    > nav {
        height: 100%;
    }

    > nav > ul {
        display: flex;
        list-style: none;
        align-items: center;
        margin: 0;
        padding: 0;
        height: 100%;

        .main-menu-item {
            position: relative;
            height: 100%;

            > a {
                text-decoration: none;
                color: var(--anresis-color-text);
                font: var(--anresis-font-main-menu-item);
                text-transform: var(--anresis-font-main-menu-item-transform);
                height: 100%;
                display: flex;
                align-items: center;
                gap: var(--anresis-spacing-1);
                padding: 0 var(--anresis-spacing-4);

                > img {
                    width: 12px;
                    height: 12px;
                    object-fit: contain;
                }
            }

            &:hover {
                > a {
                    color: var(--anresis-color-primary-text);
                    background: var(--anresis-color-grey-2);

                    > img {
                        filter: var(--anresis-color-primary-filter);
                    }
                }

                .sub-menu {
                    display: flex;
                }
            }
        }

        .main-menu-item-active {
            > a {
                color: var(--anresis-color-primary);
            }
        }
    }

    .sub-menu {
        position: absolute;
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--anresis-color-white-background);
        z-index: 20;
        top: 100%;
        min-width: 300px;
        width: max-content;
        white-space: nowrap;
        box-shadow: 0 5px 5px rgba(170, 170, 170, 0.5);

        .sub-menu-item {
            width: 100%;
            > a {
                text-decoration: none;
                color: var(--anresis-color-primary-text);
                font: var(--anresis-font-sub-menu-item);
                height: 60px;
                width: 100%;
                display: flex;
                align-items: center;
                gap: var(--anresis-spacing-4);
                padding: 0 var(--anresis-spacing-4);

                > img {
                    width: 1em;
                    height: 1em;
                    filter: var(--anresis-color-primary-filter);
                }
            }

            &:hover {
                > a {
                    color: var(--anresis-color-primary-text);
                    background: var(--anresis-color-grey-2);
                }
            }
        }

        .sub-menu-item-active {
            > a {
                color: var(--anresis-color-primary-text);
                background: var(--anresis-color-grey-2);
            }
        }
    }

    .main-menu-mobile {
        display: none;
    }

    .language-menu {
        margin-inline-start: auto;

        > a {
            text-transform: uppercase !important;
        }

        .icon {
            img {
                display: block;
            }
        }

        .sub-menu {
            min-width: 100%;
        }

        .sub-menu-item {
            text-transform: uppercase;

            a {
                display: flex;
                align-items: center;
                gap: var(--anresis-spacing-1);
            }
        }
    }

    li:has(.button--site-switch) {
        margin-inline-start: auto;
        margin-inline-end: var(--anresis-spacing-4);

        & + .language-menu {
            margin-inline-start: 0;
        }
    }

    @media (max-width: 550px) {
        .button--site-switch {
            display: none;
        }

        .language-menu {
            margin-inline-start: auto !important;
        }
    }

}

@media screen and (max-width: 1199px) {
  .main-menu-item:not(.language-menu) {
    display: none;
  }
}