/* DockSpawn 4 keeps layout geometry in its own stylesheet. This theme is also
   loaded on the page for context menus rendered outside the shadow root. */
.panel-base, .dockspan-tab-host, .dock-auto-hide-rail, .dockspab-tab-handle-context-menu {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  color: var(--wcd-color-text);
}
.panel-titlebar, .dock-container, .document-manager,
.dockspan-tab-handle-list-container, .dock-auto-hide-rail {
  background: var(--demo-toolbar);
  color: var(--wcd-color-text-muted);
}
.panel-titlebar { box-shadow: inset 0 -1px var(--wcd-color-border); }
.panel-titlebar-text { padding-top: 4px; color: inherit; }
.panel-element-content-container, .dockspan-tab-host, .dockspan-tab-content {
  background: var(--wcd-color-surface);
}
.splitbar-horizontal, .splitbar-vertical { background: var(--demo-background); }
.splitbar-horizontal:hover, .splitbar-vertical:hover { background: var(--wcd-color-surface-hover); }
.splitbar-horizontal:active, .splitbar-vertical:active,
.splitbar-horizontal-ghoust, .splitbar-vertical-ghoust { background: var(--wcd-color-accent); }
.dockspan-tab-handle {
  display: flex;
  align-items: center;
  background: var(--demo-toolbar);
  color: var(--wcd-color-text-muted);
  box-shadow: inset -1px 0 var(--wcd-color-border);
}
.dockspan-tab-handle-text { margin-top: 0; }
.dockspan-tab-handle:hover, .dockspan-tab-handle-selected:hover {
  background: var(--wcd-color-surface-hover);
  color: var(--wcd-color-text);
}
.dockspan-tab-handle-selected {
  background: var(--wcd-color-surface);
  color: var(--wcd-color-text);
  box-shadow: inset 0 2px var(--wcd-color-accent);
}
.dockspan-tab-handle-active, .dockspan-tab-handle-active:hover, .dockspan-panel-active {
  background: var(--wcd-color-surface-hover);
  color: var(--wcd-color-text);
  box-shadow: inset 0 2px var(--wcd-color-accent);
}
.dockspan-panel-titlebar-text-active { color: var(--wcd-color-text); }
.dockspan-tab-handle-content-seperator { background: var(--wcd-color-border); }
.dockspan-tab-handle-content-seperator-active { background: var(--wcd-color-accent); }
.panel-titlebar-button-close, .panel-titlebar-button-auto-hide,
.dockspan-tab-handle-close-button { color: inherit; }
.panel-titlebar-button-close:hover, .panel-titlebar-button-auto-hide:hover,
.dockspan-tab-handle-close-button:hover,
.dockspan-panel-active .panel-titlebar-button-close:hover,
.dockspan-panel-active .panel-titlebar-button-auto-hide:hover,
.dockspan-tab-handle-active .dockspan-tab-handle-close-button:hover {
  background: var(--wcd-color-surface-hover);
  color: var(--wcd-color-accent-text);
}
.panel-titlebar-button-close:active, .panel-titlebar-button-auto-hide:active,
.dockspan-tab-handle-close-button:active,
.dockspan-panel-active .panel-titlebar-button-close:active,
.dockspan-panel-active .panel-titlebar-button-auto-hide:active {
  background: var(--wcd-color-surface-raised);
  color: var(--wcd-color-text);
}
.panel-titlebar-button-auto-hide:focus-visible, .dock-auto-hide-tab:focus-visible,
.dockspan-panel-active .panel-titlebar-button-auto-hide:focus-visible {
  outline: 2px solid var(--wcd-color-focus);
  outline-offset: -2px;
}
.dock-auto-hide-tab {
  background: transparent;
  color: var(--wcd-color-text-muted);
  box-shadow: inset 0 -2px var(--wcd-color-border);
}
.dock-auto-hide-left .dock-auto-hide-tab { box-shadow: inset 2px 0 var(--wcd-color-border); }
.dock-auto-hide-right .dock-auto-hide-tab { box-shadow: inset -2px 0 var(--wcd-color-border); }
.dock-auto-hide-tab:hover, .dock-auto-hide-tab[aria-expanded="true"] {
  background: var(--wcd-color-surface-hover);
  color: var(--wcd-color-accent-text);
  box-shadow: inset 0 -2px var(--wcd-color-accent);
}
.dock-auto-hide-left .dock-auto-hide-tab:is(:hover, [aria-expanded="true"]) { box-shadow: inset 2px 0 var(--wcd-color-accent); }
.dock-auto-hide-right .dock-auto-hide-tab:is(:hover, [aria-expanded="true"]) { box-shadow: inset -2px 0 var(--wcd-color-accent); }
.dialog-floating, .dock-auto-hide-overlay {
  box-shadow: 0 8px 28px #0004, 0 0 0 1px var(--wcd-color-border-strong);
}
.dock-wheel-panel-preview {
  background: color-mix(in srgb, var(--wcd-color-accent) 25%, transparent);
  outline: 1px solid var(--wcd-color-accent);
}
.dockspab-tab-handle-context-menu {
  position: absolute;
  z-index: 10000000;
  background: var(--wcd-color-surface);
  border: 1px solid var(--wcd-color-border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 8px 24px #0003;
}
.dockspab-tab-handle-context-menu > div { cursor: pointer; padding: 5px 20px 5px 10px; }
.dockspab-tab-handle-context-menu > div:hover {
  padding: 5px 20px 5px 10px;
  background: var(--wcd-color-surface-hover);
  color: var(--wcd-color-text);
}

.dockspan-tab-strip-controls { background: var(--demo-toolbar); }
.dockspan-tab-strip-controls > * {
  background: var(--demo-toolbar);
  color: var(--wcd-color-text);
  border-color: var(--wcd-color-border);
}
.dockspan-tab-strip-controls > :hover,
.dockspan-tab-strip-controls > [aria-pressed="true"] {
  background: var(--wcd-color-surface-hover);
}
.dockspan-tab-strip-controls > :focus-visible {
  outline: 2px solid var(--wcd-color-focus);
  outline-offset: -2px;
}
.dockspan-tab-strip-controls option {
  background: var(--wcd-color-surface);
  color: var(--wcd-color-text);
}