/*  COMPONENT: LANGUAGE SWITCHER
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--language-switcher {
        --size: 28px;
        --font-size: var(--font-size-xs);
        --background: var(--color-white);
        --color-current: var(--color-grey-200);
        --border-radius: 2rem;
    }
    .language-switcher {
    }
    .language-switcher .menu {
        list-style: none;
        padding: 0;
        display: flex;
        background-color: var(--background);
        border-radius: var(--border-radius);
        overflow: hidden;
        padding: 6px;
    }
    @media (max-width: 720px) {
        .language-switcher .menu {
            background-color: var(--color-neutral-200);
        }
    }
    .language-switcher .wpml-ls-item {
        font-size: 0;
    }
    .language-switcher .wpml-ls-item.wpml-ls-current-language {
        pointer-events: none;
        cursor: text;
    }
    .language-switcher a {
        text-decoration: none;
    }
    .language-switcher a span::after {
        display: grid;
        place-items: center;
        width: var(--size);
        height: var(--size);
        font-size: var(--font-size);
        font-weight: var(--font-weight-bold);
        border-radius: var(--border-radius);
    }
    .language-switcher .wpml-ls-item.wpml-ls-current-language span::after {
        background-color: var(--color-current);
        box-shadow: var(--box-shadow);
    }
    @media (max-width: 720px) {
        .language-switcher .wpml-ls-item.wpml-ls-current-language span::after {
            background-color: var(--color-white);
        }
    }
    .language-switcher a span[lang="en"]::after {
        content: "EN";
    }
    .language-switcher a span[lang="de"]::after {
        content: "DE";
    }
}