/* Keep foreground and background together when the interface theme changes.
   Component-specific reader, drawer and loading palettes still take precedence. */
html[data-loading-theme=dark] {
  --ui-default-button-paper: #3d3240;
  --ui-default-button-ink: #f7e8d1;
  --ui-default-hover-paper: #574456;
  --ui-default-hover-ink: #fff1d9;
}
button {
  background-color: var(--ui-default-button-paper, #fff8e9df);
  color: var(--ui-default-button-ink, var(--ink));
}
button:hover {
  background-color: var(--ui-default-hover-paper, #fffaf0);
  color: var(--ui-default-hover-ink, var(--ink));
}

/* The playlist must also work with older cached scene/theme stylesheets. */
#music-panel {
  --music-button-paper: #fffaf1;
  --music-button-ink: #473320;
  --music-button-line: #ab875a;
  --music-hover-paper: #f0dfbf;
  --music-hover-ink: #382717;
  --music-selected-paper: #d9bb83;
  --music-selected-ink: #352315;
  --music-selected-line: #956b3d;
  --music-focus: #80522e;
}
html[data-loading-theme=dark] #music-panel {
  --music-button-paper: #3d3240;
  --music-button-ink: #f7e8d1;
  --music-button-line: #c8a36d;
  --music-hover-paper: #574456;
  --music-hover-ink: #fff1d9;
  --music-selected-paper: #7b5b46;
  --music-selected-ink: #fff4de;
  --music-selected-line: #e0ba7c;
  --music-focus: #f2cb90;
}
#music-panel .music-controls button,
#music-panel .music-tracks button {
  background: var(--music-button-paper);
  color: var(--music-button-ink);
  border: 1px solid var(--music-button-line);
  opacity: 1;
  text-shadow: none;
}
#music-panel .music-controls button:hover,
#music-panel .music-tracks button:hover {
  background: var(--music-hover-paper);
  color: var(--music-hover-ink);
}
#music-panel .music-tracks button[aria-current=true] {
  background: var(--music-selected-paper);
  color: var(--music-selected-ink);
  border-color: var(--music-selected-line);
  font-weight: 650;
}
#music-panel button:focus-visible {
  outline: 2px solid var(--music-focus);
  outline-offset: 3px;
}