@import 'font-awesome/css/font-awesome.css';

body, html {
  font-family: sans-serif;
  font-size: var(--sn-stylekit-base-font-size);
  background-color: transparent;
}

* {
  // To prevent gray flash when focusing input on mobile Safari
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.editor-toolbar.fullscreen, .CodeMirror-fullscreen {
  // On Mobile, resizing the webview to avoid keyboard causes the option bar to be offset because its position is fixed.
  position: absolute !important
}

.CodeMirror {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background-color: transparent;
  border: none;
  font-size: var(--sn-stylekit-font-size-editor) !important;
  // For momentum scrolling on mobile
  -webkit-overflow-scrolling: touch;
}

.editor-toolbar, .editor-toolbar.fullscreen {
  background-color: var(--sn-stylekit-contrast-background-color);
  border-bottom: 1px solid var(--sn-stylekit-border-color);
  overflow: visible; // on windows, if window is too small, horizontal scrollbar will appear fixed without this

  &::before, &::after {
    background: none !important;
  }
}

.editor-toolbar i.separator {
  border-left-color: var(--sn-stylekit-contrast-border-color);
  border-right-color: var(--sn-stylekit-contrast-background-color);
}

.editor-toolbar button {
  color: var(--sn-stylekit-info-color) !important;
  outline: none;
  border-radius: 0;
  font-size: var(--sn-stylekit-base-font-size);
}

.editor-toolbar button.active, .editor-toolbar button:hover {
  border-color: transparent;
  background: var(--sn-stylekit-background-color);
}

.editor-toolbar.disabled-for-preview button:not(.no-disable) {
  background: inherit;
}

.editor-toolbar.fullscreen {
  @media screen and (max-width: 525px) {
    height: 80px !important;
  }
  @media screen and (min-width: 526px) {
    height: 50px !important;
  }
}

.EasyMDEContainer {
  .CodeMirror-fullscreen {
    @media screen and (max-width: 525px) {
      top: 80px !important;

      .CodeMirror-scroll {
        min-height: unset !important;
      }
    }
    @media screen and (min-width: 526px) {
      top: 50px !important;
    }
  }
  .editor-preview-side {
    @media screen and (max-width: 525px) {
      top: 80px !important;
    }
    @media screen and (min-width: 526px) {
      top: 50px !important;
    }
  }
}

.editor-preview-active, .editor-preview-active-side {
  background-color: var(--sn-stylekit-contrast-background-color);
  border: 0;
  border-left: 1px solid var(--sn-stylekit-border-color);
  color: var(--sn-stylekit-contrast-foreground-color);
  font-size: var(--sn-stylekit-font-size-editor);
  padding: 10px 15px;

  a {
    color: var(--sn-stylekit-info-color);
  }

  img {
    max-width: 100%;
  }

  pre {
    background: var(--sn-stylekit-background-color);
    color: var(--sn-stylekit-foreground-color);
    border: 1px solid var(--sn-stylekit-border-color);
    padding: 20px;
    border-radius: 3px;
    overflow-x: auto;
  }

  table {
    display: block;
    margin-bottom: 12px;
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
    border-spacing: 0px;
    border-color: var(--sn-stylekit-border-color);

    th, td {
      padding: 6px 13px;
      border: 1px solid var(--sn-stylekit-border-color);
    }

    tr:nth-child(2n) {
      background-color: var(--sn-stylekit-background-color);
    }
  }

  p code, ul li code {
    padding: 3px 6px;
    background-color: var(--sn-stylekit-background-color);
    color: var(--sn-stylekit-info-color);
    border: 1px solid var(--sn-stylekit-border-color);
    border-radius: 3px;
  }

  code {
    font-family: var(--sn-stylekit-monospace-font);
  }

  blockquote {
    padding: 0 0.5rem;
    margin-left: 0;
    color: var(--sn-stylekit-neutral-color);
    border-left: 0.3rem solid var(--sn-stylekit-background-color);
  }

  blockquote > :first-child {
    margin-top: 0;
  }

  blockquote > :last-child {
    margin-bottom: 0;
  }
}

.editor-preview-active {
  border: 0;
}

.CodeMirror {
  background-color: var(--sn-stylekit-editor-background-color) !important;
  color: var(--sn-stylekit-editor-foreground-color) !important;
  border: 0 !important;

  .CodeMirror-code .cm-comment {
    background: var(--sn-stylekit-contrast-background-color);
    color: var(--sn-stylekit-info-color);
    font-family: Consolas,monaco,"Ubuntu Mono",courier,monospace!important;
    font-size: 90%; // font-family makes font look a bit big

    &.CodeMirror-selectedtext {
      color: var(--sn-stylekit-info-contrast-color) !important;
      background: var(--sn-stylekit-info-color) !important;
    }
  }

  .cm-header {
    color: var(--sn-stylekit-editor-foreground-color);
    &.CodeMirror-selectedtext {
      color: var(--sn-stylekit-info-contrast-color) !important;
      background: var(--sn-stylekit-info-color) !important;;
    }
  }

  // Faded Markdown syntax
  .cm-formatting-header, .cm-formatting-strong, .cm-formatting-em {
    opacity: 0.2;
  }

  .cm-link, .cm-url {
    &.cm-variable-2 {
      color: var(--sn-stylekit-info-color) !important;

      &.CodeMirror-selectedtext {
        color: var(--sn-stylekit-info-contrast-color) !important;
        background: var(--sn-stylekit-info-color) !important;;
      }
    }
  }

  .cm-formatting-list-ol {
    font-weight: bold;
  }

  .cm-link, .cm-string {
    color: var(--sn-stylekit-info-color) !important;

    &.CodeMirror-selectedtext {
      color: var(--sn-stylekit-info-contrast-color) !important;
      background: var(--sn-stylekit-info-color) !important;;
    }
  }

  .CodeMirror-linenumber {
    color: gray !important;
  }

}

.CodeMirror-cursor {
  border-color: var(--sn-stylekit-editor-foreground-color);
}

.CodeMirror-selected {
  background: var(--sn-stylekit-info-color) !important;
}

.CodeMirror-selectedtext {
  color: var(--sn-stylekit-info-contrast-color);
  background: var(--sn-stylekit-info-color) !important;
}

.CodeMirror-gutters {
  background-color: var(--sn-stylekit-background-color) !important;
  color: var(--sn-stylekit-editor-foreground-color) !important;
  border-color: var(--sn-stylekit-border-color) !important;
}

// remove built in simplemde rule
@media only screen and (max-width: 700px) {
  .editor-toolbar a.no-mobile {
    display: inline-block;
  }
}

/*
  Highlight JS theming
*/
.hljs-comment,
.hljs-quote {
  font-style: italic;
  color: var(--sn-stylekit-neutral-color);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  font-weight: bold;
}

.hljs-attribute {
  color: var(--sn-stylekit-warning-color);
}

.hljs-number,
.hljs-literal {
  color: var(--sn-stylekit-info-color);
}

.hljs-string,
.hljs-doctag,
.hljs-formula {
  color: var(--sn-stylekit-success-color);
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-class .hljs-title,
.hljs-type,
.hljs-name {
  color: var(--sn-stylekit-danger-color);
  font-weight: bold;
}

.hljs-tag {
  color: var(--sn-stylekit-neutral-color);
}

.hljs-regexp {
  color: var(--sn-stylekit-success-color);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--sn-stylekit-info-color);
}

.hljs-built_in,
.hljs-builtin-name {
  text-decoration: underline;
}

.hljs-meta {
  font-weight: bold;
}

.hljs-deletion {
  color: var(--sn-stylekit-danger-color);
}

.hljs-addition {
  color: var(--sn-stylekit-success-color);
}

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

.hljs-strong {
  font-weight: bold;
}