@layer components{.locale-switcher{position:fixed;bottom:var(--space-m,1rem);right:var(--space-m,1rem);z-index:1000;font-family:var(--font-base,sans-serif);& .locale-switcher__button{display:flex;align-items:center;gap:.5rem;background:var(--color-surface,#ffffff);color:var(--color-text,#333333);border:1px solid var(--color-border,#e2e8f0);border-radius:9999px;padding:.5rem 1rem;cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transition:all .2s ease;font-weight:600;&:hover{background:var(--color-surface-hover,#f8fafc)}&[aria-expanded=true]{& .locale-switcher__icon{transform:rotate(180deg)}}}& .locale-switcher__icon{transition:transform .2s ease}& .locale-switcher__list{position:absolute;bottom:calc(100% + .5rem);right:0;background:var(--color-surface,#ffffff);border:1px solid var(--color-border,#e2e8f0);border-radius:.5rem;list-style:none;padding:.5rem 0;margin:0;min-width:100px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);&[hidden]{display:none}}& .locale-switcher__item{margin:0}& .locale-switcher__link{display:block;padding:.5rem 1rem;color:var(--color-text,#333333);text-decoration:none;transition:background .2s ease;&:hover{background:var(--color-surface-hover,#f8fafc)}}&[data-variant=dark]{& .locale-switcher__button{background:var(--color-dark,#1a202c);color:var(--color-white,#ffffff);border-color:var(--color-dark-border,#2d3748);&:hover{background:var(--color-dark-hover,#2d3748)}}& .locale-switcher__list{background:var(--color-dark,#1a202c);border-color:var(--color-dark-border,#2d3748)}& .locale-switcher__link{color:var(--color-white,#ffffff);&:hover{background:var(--color-dark-hover,#2d3748)}}}}}