/* CSS Custom Properties for theming */
:root {
  --text-color: #333;
  --text-muted: #888;
  --background-color: #fff;
  --border-color: #ddd;
  --snippet-stderr-bg: #edd;
  --highlight-bg: #ddd;
}

[data-theme="dark"] {
  --text-color: #e6e6e6;
  --text-muted: #aaa;
  --background-color: #1a1a1a;
  --border-color: #444;
  --snippet-stderr-bg: #4a2c2c;
  --highlight-bg: #555;
  --color-fg-default: #e6e6e6;
  --color-fg-muted: #aaa;
  --color-accent-fg: #3d98aa;
  --color-canvas-default: #000; /* bg of panel */
  --color-canvas-subtle: #333; /* bg of panel header, snippet output etc. */
  --color-canvas-overlay: #222; /* menu items */
  --color-danger-fg: #ae4242;  /* dead link */
}

.ace_active-line {
  background: var(--highlight-bg) !important;
}

#gollum-dialog-dialog-inner {
  background: var(--color-canvas-overlay) !important;
}

#gollum-dialog-dialog-body fieldset .field label {
  color: var(--text-color) !important;
}

/* Apply theme variables to existing styles */
body {
  color: var(--text-color);
  background-color: var(--background-color);
}

#sidebar-content .latestchanges-title {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 2px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3px;
}
#sidebar-content .latestchanges ul {
  font-size: 12px;
  list-style-type: none;
  padding-left: 10px;
}
#sidebar-content .latestchanges .latestchanges-time {
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
}

#sidebar-content .backlinks-title {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 2px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3px;
}
#sidebar-content .backlinks ul {
  font-size: 12px;
  list-style-type: none;
  padding-left: 10px;
}
#sidebar-content .reflinks-title {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 2px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 3px;
}
#sidebar-content .reflinks ul {
  font-size: 12px;
  list-style-type: none;
  padding-left: 10px;
}
.reflink-item {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-superscript {
  background-color: var(--highlight-bg);
  vertical-align: super;
  font-size: x-small;
}

.hashtag {
  font-size: small;
  font-family: monospace;
  font-weight: bold;
  background-color: var(--highlight-bg);
}
.tag_scale0{ font-size: x-small; display: none; }
.tag_scale1{ font-size: x-small; }
.tag_scale2{ font-size: small; }
.tag_scale3{ font-size: small; }
.tag_scale4{ font-size: medium; }
.tag_scale5{ font-size: medium; }
.tag_scale6{ font-size: large; }
.tag_scale7{ font-size: large; }
.tag_scale8{ font-size: x-large; }

textarea.snippet_code {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  width: 100%;
  font-family: monospace;
  font-size: 10pt;
  background-color: var(--color-canvas-default);
  color: var(--text-color);
  font-family: monospace;
}

/* this is needed for mobile devices when "flash" notification is shown. */
#gollum-editor-body-ace {
  width: 100%;
}

/* marker for snippet */
.snippet {
  border-left-width: 2px;
  border-left-style: solid;
  padding-left: 10px;
  margin-bottom: 30px;
}

/* stderr in snippet */
pre.stderr {
  background-color: var(--snippet-stderr-bg);
}

/* Make display maths scrollable in mobile. */
.kdmath {
  overflow-x: scroll;
}

/* Make inline code scrollable in mobile. */
.markdown-body code {
    display: inline-block;
    overflow-x: scroll;
    max-width: 100%;
    vertical-align: middle;
}