/* Interaction states shared by old and new components. */
html[data-theme="dark"] :where(
  a,
  button,
  .btn,
  [role="button"],
  [tabindex]
):focus-visible {
  outline-color: var(--brand) !important;
  box-shadow: var(--shadow-focus) !important;
}

html[data-theme="dark"] :where(
  .chip,
  .pill,
  [class$="Chip"],
  [class$="Pill"],
  [class*="Chip--"],
  [class*="Pill--"]
) {
  background-color: var(--surface-3) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}
html[data-theme="dark"] :where(
  .chip,
  .pill,
  [class$="Chip"],
  [class$="Pill"]
):hover {
  background-color: var(--control-bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--control-border-hover) !important;
}
html[data-theme="dark"] :where(
  .chip.active,
  .pill.active,
  [class*="Chip--active"],
  [class*="Pill--active"],
  [aria-selected="true"]
) {
  background-color: var(--brand-soft-2) !important;
  color: var(--brand-hover) !important;
  border-color: rgba(var(--brand-rgb), .48) !important;
}

html[data-theme="dark"] :where(
  .tabBtn,
  .subtab,
  [role="tab"],
  [class$="Tab"],
  [class$="Tabs"] button
):not(.active):not([aria-selected="true"]):hover {
  background-color: var(--control-bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--control-border-hover) !important;
}

html[data-theme="dark"] :where(
  .tabBtn.active,
  .subtab.active,
  [role="tab"][aria-selected="true"],
  [class$="Tabs"] button.active
) {
  background-color: var(--brand-soft-2) !important;
  color: var(--brand-hover) !important;
  border-color: rgba(var(--brand-rgb), .46) !important;
}

html[data-theme="dark"] :where(
  [class*="Menu"] a,
  [class*="Menu"] button,
  [class*="Popover"] a,
  [class*="Popover"] button,
  [role="menuitem"],
  [role="option"]
):not(.active):not([aria-selected="true"]):hover {
  background-color: var(--control-bg-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :where([role="option"][aria-selected="true"], [role="menuitem"].active) {
  background-color: var(--brand-soft-2) !important;
  color: var(--brand-hover) !important;
}

html[data-theme="dark"] :where(a[href]):hover { text-decoration-color: currentColor; }

@media (hover: none) {
  html[data-theme="dark"] :where(button, .btn, [role="button"]):hover { transform: none !important; }
}

html[data-theme="dark"] :where([class*="Pill"], [class*="Chip"], .pill, .chip):is([class*="Danger"], [class*="danger"], [data-tone="danger"]) {
  background-color: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger-text) !important;
}
html[data-theme="dark"] :where([class*="Pill"], [class*="Chip"], .pill, .chip):is([class*="Success"], [class*="success"], [class*="Ok"], [data-tone="success"]) {
  background-color: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}
html[data-theme="dark"] :where([class*="Pill"], [class*="Chip"], .pill, .chip):is([class*="Warn"], [class*="warn"], [data-tone="warning"]) {
  background-color: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}