/* One Dark palette for AFFiNE's dark appearance. */
html[data-theme="dark"],
html[data-theme="dark"] affine-page-root {
  --affine-brand-color: #61afef;
  --affine-primary-color: #61afef;
  --affine-primary-color-04: #61afef1a;
  --affine-secondary-color: #c678dd;
  --affine-tertiary-color: #21252b;
  --affine-background-primary-color: #282c34;
  --affine-background-secondary-color: #21252b;
  --affine-background-tertiary-color: #2c313a;
  --affine-background-overlay-panel-color: #2c313a;
  --affine-background-code-block: #21252b;
  --affine-text-primary-color: #abb2bf;
  --affine-text-secondary-color: #9da5b4;
  --affine-text-disable-color: #5c6370;
  --affine-text-emphasis-color: #61afef;
  --affine-icon-color: #abb2bf;
  --affine-icon-secondary: #9da5b4;
  --affine-link-color: #61afef;
  --affine-border-color: #3b4048;
  --affine-divider-color: #3b4048;
  --affine-hover-color: #abb2bf14;
  --affine-hover-color-filled: #353b45;
  --affine-placeholder-color: #9da5b4;
  --affine-quote-color: #9da5b4;
  --affine-success-color: #98c379;
  --affine-warning-color: #e5c07b;
  --affine-error-color: #e06c75;
  --affine-processing-color: #61afef;
  --affine-tooltip: #abb2bf;
  --affine-blue: #61afef;

  --affine-v2-layer-background-primary: var(--affine-background-primary-color);
  --affine-v2-layer-background-secondary: var(--affine-background-secondary-color);
  --affine-v2-layer-background-tertiary: var(--affine-background-tertiary-color);
  --affine-v2-layer-background-overlayPanel: var(--affine-background-overlay-panel-color);
  --affine-v2-layer-background-codeBlock: var(--affine-background-code-block);
  --affine-v2-layer-background-hoverOverlay: var(--affine-hover-color);
  --affine-v2-layer-background-mobile-primary: var(--affine-background-primary-color);
  --affine-v2-layer-background-mobile-secondary: var(--affine-background-secondary-color);
  --affine-v2-layer-background-mobile-tertiary: var(--affine-background-tertiary-color);
  --affine-v2-layer-insideBorder-border: var(--affine-border-color);
  --affine-v2-layer-insideBorder-primaryBorder: var(--affine-brand-color);
  --affine-v2-text-primary: var(--affine-text-primary-color);
  --affine-v2-text-secondary: var(--affine-text-secondary-color);
  --affine-v2-text-tertiary: var(--affine-text-secondary-color);
  --affine-v2-text-placeholder: var(--affine-placeholder-color);
  --affine-v2-text-disable: var(--affine-text-disable-color);
  --affine-v2-text-emphasis: var(--affine-brand-color);
  --affine-v2-text-link: var(--affine-link-color);
  --affine-v2-icon-primary: var(--affine-icon-color);
  --affine-v2-icon-secondary: var(--affine-icon-secondary);
  --affine-v2-icon-tertiary: var(--affine-icon-secondary);
  --affine-v2-icon-disable: var(--affine-text-disable-color);
  --affine-v2-button-primary: var(--affine-brand-color);
  --affine-v2-button-secondary: var(--affine-hover-color-filled);
  --affine-v2-button-buttonOverHover: #3e4451;
  --affine-v2-button-pureWhiteText: #282c34;
  --affine-v2-button-error: var(--affine-error-color);
  --affine-v2-button-success: var(--affine-success-color);
  --affine-v2-input-background: var(--affine-background-secondary-color);
  --affine-v2-input-border-default: var(--affine-border-color);
  --affine-v2-input-border-active: var(--affine-brand-color);
  --affine-v2-input-border-error: var(--affine-error-color);
  --affine-v2-input-scrollBar-handle: #4b5263;
  --affine-v2-tab-fontColor-active: var(--affine-text-primary-color);
  --affine-v2-tab-fontColor-default: var(--affine-text-secondary-color);
  --affine-v2-tab-fontColor-hover: var(--affine-text-primary-color);
  --affine-v2-tab-iconColor-active: var(--affine-icon-color);
  --affine-v2-tab-iconColor-default: var(--affine-icon-secondary);
  --affine-v2-tab-iconColor-hover: var(--affine-icon-color);
  --affine-v2-tab-tabBackground-active: var(--affine-hover-color-filled);
  --affine-v2-tab-tabBackground-default: var(--affine-background-secondary-color);
  --affine-v2-tab-tabBackground-hover: var(--affine-hover-color-filled);
  --affine-v2-tab-divider-divider: var(--affine-border-color);
  --affine-v2-tab-divider-indicator: var(--affine-brand-color);
  --affine-v2-switch-fontColor-primary: var(--affine-text-primary-color);
  --affine-v2-switch-fontColor-secondary: var(--affine-text-secondary-color);
  --affine-v2-switch-fontColor-tertiary: var(--affine-text-secondary-color);
  --affine-v2-switch-iconColor-active: var(--affine-icon-color);
  --affine-v2-switch-iconColor-default: var(--affine-icon-secondary);
  --affine-v2-switch-buttonBackground-active: var(--affine-hover-color-filled);
  --affine-v2-switch-switchBackground-background: var(--affine-background-secondary-color);
}

html[data-theme="dark"] [data-testid="app-sidebar"] {
  background-color: var(--affine-background-secondary-color);
}

/* AFFiNE 0.27.4: keep the workspace focused on documents. */
nav [data-active]:has([data-testid="notification-button"]),
nav [data-testid="navigation-panel-favorites"],
nav [data-testid="navigation-panel-collections"],
a[href^="/workspace/"][href$="/collection"],
div:has(> [data-testid="ai-island"]),
nav [data-testid="slider-bar-invite-members-button"],
nav a[href="https://affine.pro/blog?tag=Release+Note"],
nav [data-testid="slider-bar-import-button"],
/* Download App has no test ID; its particles and halo are adjacent siblings. */
nav button:has(> div[aria-hidden="true"] + span[aria-hidden="true"]),
/* In 0.27.4, only the starter bar and backlinks panel follow this editor gap. */
[data-testid="page-editor-blank"] ~ div {
  display: none !important;
}