/* 
 * Translation Flags Language Switcher CSS
 * Alle CSS-Styles für die Translation-Flags (Language-Switcher)
 * Farben müssen via Custom Properties aus der colors.css genutzt werden
 * 
 * WICHTIG: Es gibt KEIN JavaScript für die Flaggen, da sie direkt nebeneinander
 * angezeigt werden und keine Dropdown-Funktionalität benötigen.
 */

/* Language Switcher Container */
/* VERPFLICHTEND: Flaggen nebeneinander mit 2px Abstand (Regel 003 in 011-ui-widget-translation-flags.mdc) */
/* HINWEIS: display-Eigenschaft wird in navigation.css für .language-switcher-desktop und .language-switcher-mobile definiert */
.base-language-switcher {
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    overflow: visible;
    min-width: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Legacy Support: language-flags (ohne switcher) */
.base-language-flags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    overflow: visible;
    min-width: 0;
}

/* Language Flag Link */
.base-language-flag-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0;
    margin: 0;
    transition: opacity var(--transition-fast);
    opacity: 0.7;
    flex-shrink: 0;
}

.language-flag-link:hover {
    opacity: 1;
}

.language-flag-link.active {
    opacity: 1;
}

/* Flag Icon */
/* VERPFLICHTEND: Flaggen dürfen keinen Rahmen haben (Regel 004 in 011-ui-i18-flags-language-switcher.mdc) */
.base-flag-icon {
    width: 24px;
    height: 18px;
    min-width: 24px;
    min-height: 18px;
    display: block;
    object-fit: contain;
    vertical-align: middle;
    border: none;
    background: transparent;
    flex-shrink: 0;
}

/* VERPFLICHTEND: Z-Index für Language-Switcher muss hoch genug sein (Regel 020 in 011-ui-i18n.mdc) */
.base-language-switcher-desktop,
.base-language-switcher-mobile {
    z-index: 10;
    position: relative;
}