@layer components {
    .locale-switcher {
        position: relative;

        & .locale-switcher__button {
            background: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            color: var(--color-text);
            padding: var(--space-2xs, 0.25rem) var(--space-s);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);

            &:hover,
            &[aria-expanded="true"] {
                border-color: var(--color-accent);
                color: var(--color-accent-strong);
            }
        }

        & .locale-switcher__list {
            position: absolute;
            inset-inline-end: 0;
            top: calc(100% + var(--space-2xs, 0.25rem));
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-m);
            box-shadow: var(--shadow-m);
            list-style: none;
            padding: var(--space-2xs, 0.25rem);
            margin: 0;
            z-index: 50;
            min-width: 6rem;

            opacity: 0;
            transform: translateY(-0.35rem);
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;

            &.is-open {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
                visibility: visible;
            }
        }

        & .locale-switcher__link {
            display: block;
            padding: var(--space-2xs, 0.25rem) var(--space-xs);
            color: var(--color-text);
            text-decoration: none;
            border-radius: var(--radius-s);
            font-size: 0.9rem;

            &:hover {
                background: var(--color-surface-mixed);
                color: var(--color-accent-strong);
            }
        }
    }
}