#sb-root {
  --highlight-color: #464cfc;
  --directive-border-color: #0000000f;
  --directive-font-color: #5b5b5b;

  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --editor-font: "iA-Mono", "Menlo";
  font-family: var(--ui-font);
}

#sb-top {
  background-color: #e1e1e1;
  border-bottom: #cacaca 1px solid;
}


.sb-panel {
  border-left: 1px solid #eee;
}

.sb-bhs {
  border-top: rgb(193, 193, 193) 1px solid;
}

.sb-modal {
  border: 1px solid #000;
  background-color: #fff;
}

.sb-notifications {
  font-family: var(--editor-font);
}

.sb-notifications>div {
  border: rgb(41, 41, 41) 1px solid;
}

.sb-notification-info {
  background-color: rgb(187, 221, 247);
}

.sb-notification-error {
  background-color: rgb(255, 84, 84);
}

.sb-saved {
  color: #111;
}

.sb-unsaved {
  color: #5e5e5e;
}

.sb-loading {
  color: #7a7a7a;
}

.sb-actions button {
  border: 0;
  margin: 3px;
  padding: 5px;
  background-color: transparent;
  color: #292929;
  cursor: pointer;
}

.sb-actions button:hover {
  color: #0772be;
}

/* Filter boxes */
.sb-filter-box {
  background-color: #fff;
  border: rgb(103, 103, 103) 1px solid;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;

  .cm-scroller {
    font-family: var(--ui-font);
  }

  .cm-content {
    padding: 0;

    .cm-line {
      padding: 2px 0 0 3px;
    }
  }
}

.sb-filter-box .sb-header {
  border-bottom: 1px rgb(108, 108, 108) solid;
}

.sb-filter-box .sb-header .sb-mini-editor {
  font-family: var(--ui-font);
  width: 100%;
  border: 0;
  outline: none;
}

.sb-filter-box .sb-help-text {
  background-color: #eee;
  border-bottom: 1px rgb(108, 108, 108) solid;
  color: #555;
}

.sb-filter-box .sb-selected-option {
  color: #eee;
}

.sb-filter-box .sb-option .sb-hint,
.sb-filter-box .sb-selected-option .sb-hint {
  color: #eee;
  background-color: #212476;
}

/* Editor */

#sb-editor {

  .cm-content {
    font-family: var(--editor-font);
  }

  .cm-selectionBackground {
    background-color: #d7e1f6 !important;
  }

  .cm-editor .cm-tooltip-autocomplete {
    .cm-completionDetail {
      font-style: normal;
      display: block;
      font-size: 80%;
      margin-left: 5px;
      color: #555;
    }

    li[aria-selected] .cm-completionDetail {
      color: #d2d2d2;
    }

    .cm-completionLabel {
      display: block;
      margin-left: 5px;
    }

    .cm-completionIcon {
      display: none;
    }
  }

  .sb-header-inside.sb-line-h1 {
    text-indent: -2ch;
  }

  .sb-header-inside.sb-line-h2 {
    text-indent: -3ch;
  }

  .sb-header-inside.sb-line-h3 {
    text-indent: -4ch;
  }

  .sb-header-inside.sb-line-h4 {
    text-indent: -5ch;
  }

  .sb-line-h1,
  .sb-line-h2,
  .sb-line-h3,
  .sb-line-h4 {
    // background-color: rgba(0, 30, 77, 0.5);
    color: #333;
    font-weight: bold;
    padding: 2px 2px !important;
  }

  .sb-line-h1 .sb-meta,
  .sb-line-h2 .sb-meta,
  .sb-line-h3 .sb-meta,
  .sb-line-h4 .sb-meta {
    color: #a1a1a0;
  }

  .sb-line-h1 {
    font-size: 1.5em;
  }

  .sb-line-h2 {
    font-size: 1.2em;
  }

  .sb-line-h3 {
    font-size: 1.1em;
  }

  .sb-line-h4 {
    font-size: 1em;
  }

  .sb-hashtag {
    color: #e2e9ff;
    background-color: #002b6aad;
    border: 1px solid #0120416b;
    border-radius: 6px;
    padding: 0 3px;
    margin: 0 -3px;
    font-size: 0.9em;
  }

  .sb-strikethrough {
    text-decoration: line-through;

    &.sb-meta {
      text-decoration: none;
    }
  }

  .sb-line-hr {
    border-top: rgb(76, 75, 75) solid 1px;
    margin-top: 1em;
    margin-bottom: -1em;
  }

  .sb-hr {
    font-weight: bold;
  }

  .sb-naked-url {
    color: #0330cb;
    cursor: pointer;
  }

  .sb-named-anchor {
    color: #959595;
  }

  .sb-command-button {
    font-family: var(--editor-font);
    font-size: 1em;
  }

  .sb-command-link.sb-meta {
    color: #959595;
  }

  .sb-command-link-name {
    background-color: #e3dfdf;
    cursor: pointer;
    border-top: 1px solid silver;
    border-left: 1px solid silver;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    border-radius: 4px;
    padding: 0 4px;
  }

  /* Color list item this way */
  .sb-line-li .sb-meta {
    color: rgb(150, 150, 150);
  }

  /* Then undo other meta */
  .sb-line-li .sb-meta~.sb-meta {
    color: #650007;
  }

  .sb-line-code {
    background-color: rgba(72, 72, 72, 0.1);
  }

  .sb-line-code .sb-code {
    background-color: transparent;
  }

  .sb-line-tbl-header {
    font-weight: bold;
  }

  .sb-line-tbl-header .meta {
    font-weight: normal;
  }

  .sb-struct {
    color: darkred;
  }

  .sb-code {
    background-color: rgba(72, 72, 72, 0.1);
  }

  .sb-highlight {
    background-color: rgba(255, 255, 0, 0.5);
  }

  .sb-line-fenced-code {
    background-color: rgba(72, 72, 72, 0.1);
  }

  /* Mostly for JS when that comes back */
  .sb-line-fenced-code .sb-code {
    background-color: transparent;
  }

  .sb-line-fenced-code .sb-comment {
    color: #989797;
    background-color: transparent;
    border-radius: 0;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  .sb-keyword {
    font-weight: bold;
  }

  .sb-variableName {
    color: #024866;
  }

  .sb-typeName {
    color: #038138;
  }

  .sb-string,
  .sb-string2,
  .sb-number {
    color: #440377;
  }

  .sb-string {
    color: #440377;
  }

  .sb-meta {
    color: #650007;
  }

  .sb-line-blockquote {
    background-color: rgba(220, 220, 220, 0.5);
    color: #676767;
    text-indent: -2ch;
    padding-left: 2ch;
  }

  .sb-admonition {
    border-left-width: 4px !important;
    border-left-style: solid;
  }

  .sb-admonition-icon {
    display: inline-flex;
    vertical-align: middle;
    padding-left: 16px;
    padding-right: 8px;
  }

  .sb-admonition.sb-admonition-note {
    border-left-color: rgb(0, 184, 212);
  }

  .sb-admonition.sb-admonition-warning {
    border-left-color: rgb(255, 145, 0);
  }

  .sb-admonition-title.sb-admonition-note {
    background-color: rgba(0, 184, 212, 0.1);
  }

  .sb-admonition-title.sb-admonition-warning {
    background-color: rgba(255, 145, 0, 0.1);
  }

  .sb-admonition-note .sb-admonition-icon {
    color: rgb(0, 184, 212);
  }

  sb-admonition-warning .sb-admonition-icon {
    color: rgb(255, 145, 0);
  }

  // Frontmatter

  .sb-frontmatter {
    background-color: rgba(255, 246, 189, 0.5);
    color: #676767;
  }

  .sb-frontmatter-marker {
    color: #890000;
    float: right;
    font-size: 80%;
    padding-right: 7px;
    opacity: 0.25;
  }


  // Directives


  .sb-directive-body {
    border-left: 1px solid var(--directive-border-color);
    border-right: 1px solid var(--directive-border-color);
  }

  .cm-line.sb-directive-start,
  .cm-line.sb-directive-end {
    color: var(--directive-font-color);
    background-color: rgb(233, 233, 233, 50%);
    padding: 3px;
  }

  .sb-directive-start {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-style: solid;
    border-color: var(--directive-border-color);
    border-width: 1px 1px 0 1px;
  }

  .sb-directive-end {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-style: solid;
    border-color: var(--directive-border-color);
    border-width: 0 1px 1px 1px;
  }

  .sb-directive-start-outside {
    color: transparent !important;

    .sb-directive-placeholder {
      color: var(--directive-font-color) !important;
      opacity: 0.25;
      padding-right: 7px;
      float: right;
      font-size: 80%;
    }

    * {
      color: transparent !important;
    }
  }

  .sb-directive-end-outside {
    color: transparent !important;

    .sb-directive-placeholder {
      color: var(--directive-font-color) !important;
      opacity: 0.25;
      padding-right: 7px;
      font-size: 80%;
      float: right;
    }

    * {
      color: transparent !important;
    }
  }

  .sb-emphasis {
    font-style: italic;
  }

  .sb-strong {
    font-weight: 900;
  }

  .sb-line-code-outside .sb-code-info {
    display: block;
    float: right;
    color: #000;
    opacity: .25;
    font-size: 90%;
    padding-right: 7px;
  }

  .sb-link:not(.sb-url) {
    cursor: pointer;
  }

  .sb-link:not(.sb-meta, .sb-url) {
    color: #0330cb;
    text-decoration: underline;
  }

  .sb-link.sb-url {
    color: #7e7d7d;
  }

  .sb-url:not(.sb-link) {
    color: #0330cb;
    text-decoration: underline;
    cursor: pointer;
  }

  .sb-atom {
    color: darkred;
  }

  .sb-wiki-link-page {
    color: #0330cb;
    background-color: rgba(77, 141, 255, 0.07);
    border-radius: 5px;
    padding: 0 5px;
    // white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }

  a.sb-wiki-link-page-missing,
  .sb-wiki-link-page-missing>.sb-wiki-link-page {
    color: #9e4705;
    background-color: rgba(77, 141, 255, 0.07);
    border-radius: 5px;
    padding: 0 5px;
    // white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }

  .sb-wiki-link {
    cursor: pointer;
    color: #8f96c2;
  }

  .sb-task-marker {
    color: #676767;
    font-size: 91%;
  }

  .sb-line-comment {
    background-color: rgba(255, 255, 0, 0.5);
  }
}

html[data-theme="dark"] {
  #sb-root {
    background-color: #000;
    color: #fff;
  }

  #sb-top {
    background-color: rgb(96, 96, 96);
    border-bottom: rgb(62, 62, 62) 1px solid;
    color: #fff;
  }

  .sb-actions button {
    color: #adadad;
  }

  .sb-actions button:hover {
    color: #37a1ed;
  }

  // Page states
  .sb-saved {
    color: rgb(225, 225, 225);
  }

  .sb-unsaved {
    color: #c7c7c7;
  }

  .sb-loading {
    color: #c7c7c7;
  }



  .sb-filter-box,
  /* duplicating the class name to increase specificity */
  .sb-help-text.sb-help-text {
    color: #ccc;
    background-color: rgb(38, 38, 38);
  }

  .sb-help-text {
    border-bottom: 1px solid #6c6c6c;
  }

  #sb-editor {

    .sb-line-h1,
    .sb-line-h2,
    .sb-line-h3,
    .sb-line-h4 {
      color: #d1d1d1;
    }

    .sb-frontmatter {
      background-color: rgb(41, 40, 35, 0.5);

      .sb-frontmatter-marker {
        color: #000;
      }
    }

    .sb-line-li .sb-meta~.sb-meta,
    .sb-line-fenced-code .sb-meta {
      color: #d17278;
    }

    .sb-wiki-link-page {
      color: #7e99fc;
      background-color: #a3bce712;
    }

    .sb-code,
    .sb-line-fenced-code,
    .sb-task-marker {
      background-color: #333;
    }

    .sb-notifications>div {
      border: rgb(197, 197, 197) 1px solid;
      background-color: #333;
    }

    .sb-naked-url {
      color: #94b0f4;
    }

    .sb-command-link {
      background-color: #595959;
    }

    .sb-table-widget {

      tbody tr:nth-of-type(even) {
        background-color: #686868;
      }
    }
  }

}