Language Picker Pill

'use client';

import './LangSwitcherPill.css';

/** LangSwitcherPill — ported from astro-component-kit. */
export interface LangSwitcherPillProps {
}

export function LangSwitcherPill({}: LangSwitcherPillProps) {
  return (
    <>
      <div className="lang-pill" data-rk-c3a6ea="">
        <span className="curr" data-rk-c3a6ea="">EN</span>
        <div className="list" data-rk-c3a6ea="">
          <span data-rk-c3a6ea="">ES</span>
          <span data-rk-c3a6ea="">FR</span>
          <span data-rk-c3a6ea="">JP</span>
        </div>
      </div>
    </>
  );
}

export default LangSwitcherPill;

/* LangSwitcherPill — ported from astro-component-kit (navigation/LangSwitcherPill.astro) */

.lang-pill:where([data-rk-c3a6ea]) { background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 100px; color: #fff; font-size: 0.75rem; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; position: relative; }
.list:where([data-rk-c3a6ea]) { position: absolute; top: 110%; left: 0; background: #111; border-radius: 8px; border: 1px solid #333; display: none; flex-direction: column; z-index: 10; }
.lang-pill:hover:where([data-rk-c3a6ea]) .list:where([data-rk-c3a6ea]) { display: flex; }
.list:where([data-rk-c3a6ea]) span:where([data-rk-c3a6ea]) { padding: 5px 15px; }
.list:where([data-rk-c3a6ea]) span:hover:where([data-rk-c3a6ea]) { background: #6366f1; }