/* src/components/basic/XWUIStyleToggle/XWUIStyleToggle.css */
/**
 * XWUIStyleToggle - cycling style picker. All colors / radii via XWUI
 * tokens so the toggle's own chrome retints when a preset is selected.
 */

.xwui-style-toggle-container { display: inline-block; }

.xwui-style-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-full, 999px);
  overflow: visible;
  color: var(--text-primary);
  font-family: inherit;
}

.xwui-style-toggle__main,
.xwui-style-toggle__caret {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.xwui-style-toggle__main:hover,
.xwui-style-toggle__caret:hover { background: var(--bg-hover); }

.xwui-style-toggle__caret {
  border-inline-start: 1px solid var(--border-light);
  padding: 0.55rem 0;
  color: var(--text-tertiary);
}

.xwui-style-toggle__swatch {
  width: 14px; height: 14px;
  border-radius: var(--radius-full, 50%);
  border: 1px solid var(--overlay-subtle, var(--border-light));
  flex: 0 0 auto;
}
.xwui-style-toggle__swatch--active {
  background: var(--accent-primary);
}

.xwui-style-toggle__label {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xwui-style-toggle__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full, 999px);
}

.xwui-style-toggle__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 100;
  min-width: 280px;
  width: min(320px, 92vw);
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-menu, var(--radius-lg));
  box-shadow: var(--shadow-lg);
}

/* Many presets: shorter panel so search + a few rows read as the primary UI. */
.xwui-style-toggle__menu--compact {
  max-height: min(380px, 50vh);
}

/* Embedded panel (theme editor): menu is in-flow, not a popover. */
.xwui-style-toggle.xwui-style-toggle--pinned {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
}
.xwui-style-toggle.xwui-style-toggle--pinned .xwui-style-toggle__main {
  border-radius: 0;
  justify-content: flex-start;
}
.xwui-style-toggle.xwui-style-toggle--pinned .xwui-style-toggle__menu,
.xwui-style-toggle.xwui-style-toggle--pinned .xwui-style-toggle__menu--compact {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-width: 0;
  max-height: min(560px, 70vh);
  border: 0;
  border-top: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
}

.xwui-style-toggle__menu-head {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  display: flex; justify-content: space-between; align-items: center;
  flex: 0 0 auto;
}
.xwui-style-toggle__menu-head span {
  font-weight: 700;
  color: var(--accent-primary);
}

.xwui-style-toggle__ambiance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}
.xwui-style-toggle__ambiance:hover {
  background: var(--bg-hover);
}
.xwui-style-toggle__ambiance-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  flex: 0 0 auto;
}
.xwui-style-toggle__ambiance-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 11rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  background: var(--bg-elevated, var(--bg-secondary, var(--bg-app)));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 0.35rem);
  padding: 0.2rem 0.35rem;
}

.xwui-style-toggle__menu-search {
  padding: 0.5rem 0.65rem 0.35rem;
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}

.xwui-style-toggle__menu-search .xwui-input-text,
.xwui-style-toggle__menu-search .xwui-input-text-wrapper {
  width: 100%;
}

.xwui-style-toggle__menu-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

.xwui-style-toggle__menu-empty {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.xwui-style-toggle__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease;
}
.xwui-style-toggle__item:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.xwui-style-toggle__item.is-active {
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card, transparent));
  color: var(--accent-primary);
  font-weight: 600;
}
.xwui-style-toggle__item-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Grow moved here from __item-label: upstream wrapped the label, and the
     row still has to push meta + tick to the trailing edge. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.xwui-style-toggle__item-swatches {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* Slight overlap so the trio reads as one chip, not three lone dots. */
  margin-inline-end: 0.1rem;
}
.xwui-style-toggle__item-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 50%);
  border: 1px solid var(--overlay-subtle, var(--border-light));
  box-sizing: border-box;
  flex: 0 0 auto;
}
.xwui-style-toggle__item-swatch + .xwui-style-toggle__item-swatch {
  margin-inline-start: -3px;
}
.xwui-style-toggle__item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; min-width: 0; }
.xwui-style-toggle__item-meta  { color: var(--text-tertiary); font-size: 0.75rem; white-space: nowrap; }
.xwui-style-toggle__item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

@media (max-width: 560px) {
  .xwui-style-toggle__label,
  .xwui-style-toggle__count { display: none; }
}

/* ── minimized mode: icon + step-switch track + CSS tooltip ─────────
   Double-class specificity (.xwui-style-toggle.xwui-style-toggle--minimized)
   overrides the single-class base rules (border, bg, padding) cleanly. */

.xwui-style-toggle.xwui-style-toggle--minimized {
  border: none;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  /* Tooltip anchor: ::after is positioned relative to this element. */
  position: relative;
  overflow: visible;
}

/* Ghost icon hit-target - hosts a pinned feather XWUIIcon (not Material ligatures). */
.xwui-style-toggle__min-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.xwui-style-toggle__min-icon:hover {
  background: var(--bg-hover);
}

/* ── Step-switch track ────────────────────────────────────────────── */

.xwui-style-toggle__min-track {
  display: block;
  width: 28px;
  height: 10px;
  background: color-mix(in srgb, var(--bg-hover, rgba(0,0,0,0.1)) 70%, transparent);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full, 999px);
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  /* Soft transition on background so it retints when the theme changes. */
  transition: background 0.2s ease, border-color 0.2s ease;
}

.xwui-style-toggle__min-track:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

/* Sliding thumb - position set inline via JS (computed from idx/total).
   WHY inline style for `left`: JS calculates the proportional offset in pixels
   (travel = 16 px) so the CSS stays purely visual and doesn't need --pos/--total
   CSS variable arithmetic, which is verbose and browser-support sensitive. */
.xwui-style-toggle__min-thumb {
  position: absolute;
  top: 1px;
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: var(--radius-full, 999px);
  left: 1px;            /* default; overridden inline on each render */
  transition: left 0.2s ease, background 0.2s ease;
  pointer-events: none; /* track's click handler covers interaction */
}

/* ── CSS-only tooltip ────────────────────────────────────────────────
   content: attr(data-xwui-tooltip) reads the active preset's name set by
   the component on each setupDOM() call. Zero JS, zero portals, works for
   any language or script (Arabic, Latin, CJK…) because the attribute is
   set to whatever the preset's `name` field contains. */
.xwui-style-toggle--minimized[data-xwui-tooltip]::after {
  content: attr(data-xwui-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg-elevated, #1e293b);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  z-index: var(--z-tooltip, 200);
  box-shadow: var(--shadow-sm);
  /* Hidden by default; revealed on hover with a short fade-in. */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.xwui-style-toggle--minimized[data-xwui-tooltip]:hover::after {
  opacity: 1;
}