:root {
    --sitecore-language-target-size: 2.75rem;
    --sitecore-language-menu-layer: 10000;
    --sitecore-language-flag-width: 1.875rem;
    --sitecore-language-flag-gap: .2em;
}

/* Contain floated legacy flags in real, non-overlapping link targets. */
#languageNavigation {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    z-index: var(--sitecore-language-menu-layer);
    margin: 0;
    padding: 0;
}

#languageNavigation li {
    flex: 0 0 calc(var(--sitecore-language-flag-width) + var(--sitecore-language-flag-gap));
    display: flex;
}

#languageNavigation a {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    inline-size: 100%;
    min-inline-size: var(--sitecore-language-flag-width);
    position: relative;
}

/* Extend hit areas outside normal flow without moving the header center. */
#languageNavigation a::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: var(--sitecore-language-target-size);
}

#languageNavigation img {
    display: block;
    float: none;
    margin: 0;
}

#languageNavigation a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}