/* The theme variables the panel uses. The names follow Obsidian's, where the panel started. */
:root {
  color-scheme: light dark;
  --background-primary: #ffffff;
  --background-secondary: #f3f4f6;
  --background-modifier-border: #e2e4e8;
  --background-modifier-hover: rgba(17, 24, 39, 0.045);
  --text-normal: #16181c;
  --text-muted: #5a6069;
  --text-faint: #9399a2;
  --text-accent: #2160dc;
  --text-error: #d93a40;
  --interactive-normal: #ffffff;
  --interactive-hover: #f3f4f6;
  --interactive-accent: #2b6cf0;
  --text-on-accent: #ffffff;
  --color-red: #dc2f3c;
  --color-yellow: #a16207;
  --color-green: #1f9d55;
  --color-cyan: #0e9384;
  --font-ui-smaller: 12px;
  --font-ui-small: 13px;
  --font-ui-medium: 15px;
  --font-monospace: ui-monospace, "SF Mono", Menlo, monospace;
  --font-semibold: 600;
  --font-normal: 400;
  --radius-s: 6px;
  --radius-m: 10px;
}
:root[data-theme="dark"] {
  --background-primary: #1c1d21;
  --background-secondary: #131417;
  --background-modifier-border: #2c2e33;
  --background-modifier-hover: rgba(255, 255, 255, 0.055);
  --text-normal: #ececef;
  --text-muted: #a3a8b0;
  --text-faint: #6c717a;
  --text-accent: #79a6ff;
  --text-error: #ff6b70;
  --interactive-normal: #1c1d21;
  --interactive-hover: #26282d;
  --interactive-accent: #4d86ff;
  --color-red: #ff6369;
  --color-yellow: #e2b33c;
  --color-green: #3ccb7f;
  --color-cyan: #2fc4b2;
  --pw-site-icon-bg: rgba(255, 255, 255, 0.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-primary: #1c1d21;
    --background-secondary: #131417;
    --background-modifier-border: #2c2e33;
    --background-modifier-hover: rgba(255, 255, 255, 0.055);
    --text-normal: #ececef;
    --text-muted: #a3a8b0;
    --text-faint: #6c717a;
    --text-accent: #79a6ff;
    --text-error: #ff6b70;
    --interactive-normal: #1c1d21;
    --interactive-hover: #26282d;
    --interactive-accent: #4d86ff;
    --color-red: #ff6369;
    --color-yellow: #e2b33c;
    --color-green: #3ccb7f;
    --color-cyan: #2fc4b2;
    --pw-site-icon-bg: rgba(255, 255, 255, 0.92);
  }
}

button {
  font: inherit;
  font-size: 13px;
  color: var(--text-normal);
  background: var(--interactive-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover {
  background: var(--interactive-hover);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
button.mod-cta {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: transparent;
}
button.clickable-icon {
  border: none;
  background: transparent;
  padding: 2px 6px;
}
textarea {
  font: inherit;
  color: var(--text-normal);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
}