/* src/components/basic/XWUIStyleSwitcher/XWUIStyleSwitcher.css */
/* CE host defaults to inline - pin flex so header actions get a real box. */
xwui-style-switcher {
  display: inline-flex;
  vertical-align: middle;
}

.xwui-style-switcher {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.xwui-style-switcher__slot {
  display: block;
  min-width: 0;
}
.xwui-style-switcher--selector {
  display: block;
  width: 100%;
  max-width: 28rem;
}
.xwui-style-switcher--selector .xwui-style-switcher__slot {
  width: 100%;
}

/* `mode: 'nav'` - same chrome as xwui-web header (sun/moon + caret, no label/count). */
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle {
  --nav-style-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");
}
:root[data-theme="dark"] .xwui-style-switcher .xwui-style-toggle.nav-style-toggle,
html.xwui-dark .xwui-style-switcher .xwui-style-toggle.nav-style-toggle {
  --nav-style-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
}
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle .xwui-style-toggle__swatch {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--nav-style-icon) center / 17px 17px no-repeat;
  mask: var(--nav-style-icon) center / 17px 17px no-repeat;
}
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle .xwui-style-toggle__label,
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle .xwui-style-toggle__count {
  display: none;
}
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle .xwui-style-toggle__main {
  padding: 0.3rem 0.55rem;
  gap: 0;
}
.xwui-style-switcher .xwui-style-toggle.nav-style-toggle .xwui-style-toggle__item-meta {
  display: none;
}