@layer components {
    .language-switcher {
        display: flex;
        gap: var(--space-2);
        align-items: center;
    }

    .language-switcher select {
        min-height: var(--touch-target);
        padding-inline: var(--space-2);
        border-radius: var(--radius-m);
        border: 1px solid var(--line);
        background: var(--paper);
        color: var(--soil);
    }

    .lang-menu {
        position: relative;
    }

    .lang-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-target);
        min-width: var(--touch-target);
        border-radius: var(--radius-m);
        cursor: pointer;
        list-style: none;
    }

    .lang-menu-toggle::-webkit-details-marker {
        display: none;
    }

    .lang-menu-toggle:hover {
        background: var(--sky-tint);
    }

    .lang-menu-panel {
        position: absolute;
        inset-inline-end: 0;
        top: calc(100% + var(--space-2));
        z-index: 40;
        min-width: 13rem;
        display: grid;
        gap: var(--space-1);
        padding: var(--space-2);
        background: var(--paper);
        border: 1px solid var(--line);
        border-block-start: 3px solid var(--wheat);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-3);
    }

    .lang-menu-option {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        inline-size: 100%;
        min-block-size: var(--touch-target);
        padding-inline: var(--space-3);
        border: 0;
        background: none;
        border-radius: var(--radius-m);
        font: inherit;
        font-weight: 500;
        color: var(--soil);
        cursor: pointer;
        text-align: start;
    }

    .lang-menu-option:hover,
    .lang-menu-option:focus-visible {
        background: var(--sky-tint);
    }

    .lang-menu-option[aria-current="true"] {
        background: var(--haze);
        font-weight: 600;
    }

    .flag-uk-top {
        fill: var(--flag-azure);
    }

    .flag-uk-bottom {
        fill: var(--flag-gold);
    }

    .flag-de-top {
        fill: var(--flag-schwarz);
    }

    .flag-de-middle {
        fill: var(--flag-rot);
    }

    .flag-de-bottom {
        fill: var(--flag-gold);
    }

    .flag-en-field {
        fill: var(--flag-navy);
    }

    .flag-en-saltire {
        fill: none;
        stroke: var(--paper);
        stroke-width: 2.4;
        stroke-linecap: round;
    }

    .flag-en-cross-under {
        fill: none;
        stroke: var(--paper);
        stroke-width: 4.6;
    }

    .flag-en-cross {
        fill: none;
        stroke: var(--flag-red);
        stroke-width: 2.4;
    }

    .flag-frame {
        fill: none;
        stroke: currentColor;
        stroke-width: 1;
    }

    .lang-flag-text {
        display: inline-grid;
        place-items: center;
        inline-size: 24px;
        block-size: 24px;
        font-family: var(--font-display);
        font-size: var(--size-micro);
        font-weight: 800;
        letter-spacing: 0;
    }
}