@layer theme,base;@layer components{.theme-switch{border:1px solid var(--moza-border);border-radius:var(--moza-radius-full);gap:2px;padding:2px;display:inline-flex}.theme-switch label{border-radius:var(--moza-radius-full);width:32px;height:32px;color:var(--moza-text-secondary);cursor:pointer;place-items:center;display:grid}.theme-switch label:hover{color:var(--moza-text)}.theme-switch label:has(:checked){background:var(--moza-surface);color:var(--moza-text);box-shadow:inset 0 0 0 1px var(--moza-border)}.theme-switch label:has(:focus-visible){outline:var(--moza-control-focusWidth) solid var(--moza-focus);outline-offset:1px}@media (pointer:coarse){.theme-switch label{width:44px;height:44px}}.theme-switch[data-labelled]{border-radius:var(--moza-radius-xl);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.theme-switch[data-labelled] label{border-radius:var(--moza-radius-lg);white-space:nowrap;justify-content:center;align-items:center;gap:4px;width:auto;height:36px;padding:0 4px;font-size:13px;font-weight:500;display:flex}.theme-switch[data-labelled] label svg{flex-shrink:0}@media (pointer:coarse){.theme-switch[data-labelled] label{height:44px}}}@layer utilities;
