.mag{--card:var(--surface);--fill-slab:var(--raised);--fill-on:var(--strong);--ink:var(--ripple);--pane-edge:var(--hairline);--font-ui:var(--font-sans);box-sizing:border-box;font-family:var(--font-ui);position:relative}.mag-chip{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;position:absolute}.mag-skin{background:var(--fill-slab,var(--card));transform:translate(var(--lx,0px), var(--ly,0px));border-radius:50%;justify-content:center;align-items:center;transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .22s,color .22s;display:flex;position:absolute;inset:0;overflow:hidden}.mag-chip:hover .mag-skin{background:color-mix(in srgb, var(--fill-on) 12%, transparent)}.mag-skin .mag-mark{opacity:1;color:var(--faint);transition:opacity .22s,color .22s}.mag-chip:hover .mag-skin .mag-mark{color:var(--strong)}.mag-chip[data-on] .mag-skin{background:var(--ink);color:var(--page)}.mag-chip[data-on] .mag-skin .mag-mark{color:var(--page)}.mag-chip[data-on]:hover .mag-skin{background:var(--ink);color:var(--page)}[data-stroke=on] .mag-skin,.mag[data-stroke=on] .mag-skin{box-shadow:inset 0 0 0 1px var(--pane-edge)}.mag-mark{place-items:center;width:100%;height:100%;display:grid}.mag-mark>svg{width:19px;height:19px}@media (prefers-reduced-motion:reduce){.mag-skin{transition-duration:.16s}}.mag-chip:focus-visible{outline:none}.mag-chip:focus-visible .mag-skin{box-shadow:0 0 0 2px var(--color-ripple)}