/**
 * ## Line Styles
 */

/* All lines */
.k-markdown-input .cm-line {
  --cm-line-indent: calc(var(--cm-indent, 0) + var(--cm-mark, 0));

  margin-left: var(--cm-line-indent);
  padding: 0 var(--cm-line-padding-x);
  text-indent: calc(-1 * var(--cm-indent) - var(--cm-mark));
}

/* Codeblock with background */
.k-markdown-input .cm-codeblock {
  background: var(--cm-code-background);
  margin-left: calc(var(--cm-line-padding-x) / 2);
  margin-right: calc(var(--cm-line-padding-x) / 2);
  padding-left: calc(var(--cm-line-padding-x) / 2);
  padding-right: calc(var(--cm-line-padding-x) / 2);
}

/* Override styling of nested code inside code block applied by CodeMirror */
.k-markdown-input .cm-codeblock > * {
  background-color: transparent;
  margin: 0;
  padding: 0;
}

/* Blockquote */
.k-markdown-input .cm-blockquote {
  --cm-line-indent: var(--cm-indent, 0);
  position: relative;
  text-indent: 0;
  margin-left: calc(var(--cm-line-padding-x));
}

.k-markdown-input .cm-blockquote::before {
  background: var(--cm-color-light-gray);
  content: "";
  height: 100%;
  position: absolute;
  right: calc(100% + var(--cm-mark, 0) - 1.5ch);
  top: 0;
  left: 0;
  width: 2px;
}

.k-markdown-input .cm-blockquote:not([style*="--cm-mark:"])::before {
  right: calc(100% + var(--cm-indent, 0) - 1.5ch);
}

/* Horizontal Rule */
.k-markdown-input .cm-hr {
  display: flex !important;
  text-align: center;
}

.k-markdown-input .cm-hr::before,
.k-markdown-input .cm-hr::after {
  background: linear-gradient(var(--cm-color-light-gray), var(--cm-color-light-gray)) 50% calc(var(--cm-line-height) * 1em / 2) / 100% .0625rem no-repeat;
  content: "";
  flex: 1 0 2ch;
}

.k-markdown-input .cm-hr::before {
  margin-right: 1ch;
}

.k-markdown-input .cm-hr::after {
  margin-left: 1ch;
}

.k-markdown-input .cm-hr > * {
  flex-grow: 0;
}

.k-markdown-input .cm-cursor {
  transition: transform .15s;
}

.k-markdown-input-wrap[data-dragover="true"] .cm-cursor {
  transform: scale(1.1, 1.5);
}

/**
 * 1. Hack for overriding the color of header marks, because these
 *    would appear gray otherwise, such as other `processingInstruction`
 *    tags should. Due to CodeMirror’s language definition, these
 *    cannot be styled separately.
 */
.k-markdown-input .cm-heading > :first-child {
  color: currentColor; /* 1 */
}

/**
 * ## Inline styles
 */

/* Custom highlights plugin */

.k-markdown-input [class*=" cm-token-"],
.k-markdown-input [class^="cm-token-"] {
  background: var(--token-background, rgba(0, 0, 0, .05));
  border: .0625em solid var(--token-border, rgba(0, 0, 0, .1));
  border-radius: .125em;
  color: var(--color-text, #000);
  margin: -.125em -.0625em;
  padding: .0625em 0;
}

.k-markdown-input [class*=" cm-token-"] > *,
.k-markdown-input [class^="cm-token-"] > * {
  color: currentColor;
}

/* https://github.com/getkirby/getkirby.com/blob/master/src/scss/variables.scss */
.k-markdown-input .cm-token-red {
  --token-background: rgba(255, 0, 0, .12);
  --token-border: rgba(255, 0, 0, .25);
}

.k-markdown-input .cm-token-purple {
  --token-background: hsla(285, 44%, 50%, .17);
  --token-border: hsla(285, 44%, 50%, .4);
}

/**
 * Special chars
 */

.k-markdown-input .cm-invisible-char {
  cursor: text;
}

/**
 * 1- or more Spaces
 * 1. Ensure, that extra span around each space character does not
 *    have any effect on word-wrapping.
 **/
.k-markdown-input .cm-invisible-char[data-code="32"] {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4.5' cy='4.5' r='1.25' fill='%23DF5F5F'/%3E%3C/svg%3E");
  background-size: 1ch 1ch;
  background-position: left center;
  background-repeat: repeat-x;

  /* background:
    radial-gradient(
      circle at center,
      var(--cm-color-special-char) .1em,
      transparent .1em
    )
    left calc(50% + .0625em) / 1ch 1ch repeat-x; */
  word-break: break-all; /* 1 */
}
/*
.k-markdown-input .cm-invisible-char[data-code="32"]::after {
  content: "\200C";
} */

/**
 * 1. Sans-serif mode needs a bit more attention, because the spaces
 *    are much narrower, than in monospace mode. Otherwise, the "dot"
 *    would not render correctly.
 */
.k-markdown-input-wrap[data-font-family="sans-serif"] .cm-invisible-char[data-code="32"] {
  margin-left: -.25ch; /* 1 */
  margin-right: -.25ch; /* 1 */
  padding-left: .25ch; /* 1 */
  padding-right: .25ch; /* 1 */
}

/* No-Break Space */
.k-markdown-input .cm-invisible-char[data-code="160"] {
  background:
    linear-gradient(var(--cm-color-special-char), var(--cm-color-special-char)) .0625em 100% / .0625em .125em no-repeat,
    linear-gradient(var(--cm-color-special-char), var(--cm-color-special-char)) .0625em 100% / calc(100% - .125em) .0625em no-repeat,
    linear-gradient(var(--cm-color-special-char), var(--cm-color-special-char)) calc(100% - .0625em) 100% / .0625em .125em no-repeat;
  color: transparent;
}

/* Soft Hyphen */
.k-markdown-input .cm-invisible-char[data-code="173"] {
  border-left: .0625em solid var(--cm-color-special-char);
  left: .03125em;
  margin-left: -.0625em;
  position: relative;
}

/* Zero-Width Space */
.k-markdown-input .cm-invisible-char[data-code="8203"] {
  background: url("data:image/svg+xml,%3Csvg width='3' height='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2.915v17.17a1.5 1.5 0 11-1 0V2.915a1.5 1.5 0 111 0zM1.5 2a.5.5 0 100-1 .5.5 0 000 1zm0 20a.5.5 0 100-1 .5.5 0 000 1z' fill='%23df5f5f' fill-rule='nonzero'/%3E%3C/svg%3E%0A") no-repeat;
  margin-bottom: -4px;
  margin-left: -1.5px;
  margin-right: -1.5px;
  margin-top: -4px;
  padding-bottom: 2px;
  padding-left: 3px;
  padding-top: 2px;
}

/* Tab character */
.k-markdown-input .cm-invisible-char[data-code="9"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%23df5f5f' d='M9.85355339,3.14644661 C9.94403559,3.23692881 10,3.36192881 10,3.5 C10,3.63807119 9.94403559,3.76307119 9.85355339,3.85355339 L7.85355339,5.85355339 C7.65829124,6.04881554 7.34170876,6.04881554 7.14644661,5.85355339 C6.95118446,5.65829124 6.95118446,5.34170876 7.14644661,5.14644661 L8.29289322,4 L1.5,4 C1.22385763,4 1,3.77614237 1,3.5 C1,3.22385763 1.22385763,3 1.5,3 L8.29289322,3 L7.14644661,1.85355339 C6.95118446,1.65829124 6.95118446,1.34170876 7.14644661,1.14644661 C7.34170876,0.951184464 7.65829124,0.951184464 7.85355339,1.14644661 L9.85355339,3.14644661 Z'/%3E%3C/svg%3E%0A") left center no-repeat;
}

/* Hardbreak (2 consecutive spaces or more at end of line */
.k-markdown-input .cm-hardbreak {
  position: relative;
}

/**
 * 1. Unset text-indent, set by line styles.
 */
.k-markdown-input .cm-hardbreak::before {
  color: var(--cm-color-special-char);
  content: "\21A9\FE0E"; /* LEFTWARDS ARROW WITH HOOK */
  display: inline-block;
  margin-right: -2ch;
  pointer-events: none;
  text-align: center;
  text-indent: 0; /* 1 */
  width: 2ch;
}

/**
 * ## Extensions
 */

.k-markdown-input .cm-taskmarker {
  cursor: pointer;
  position: relative;
}

.k-markdown-input .cm-taskmarker.is-unchecked:hover::before {
  color: var(--cm-color-meta);
  content: "x";
  left: 1ch;
  margin-right: -1ch;
  opacity: .7;
  position: relative;
  text-indent: 0;
}

.k-markdown-input .cm-taskmarker.is-unchecked:hover .cm-invisible-char {
  background: none;
}

.k-markdown-input .cm-url {
  color: var(--cm-color-meta);
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .14em;
}

.k-markdown-input .cm-kirbytag-url {
  color: currentColor;
  text-decoration-color: var(--cm-kirbytag-underline);
}

:root[data-markdown-modkey="true"] .k-markdown-input .cm-url,
:root[data-markdown-modkey="true"] .k-markdown-input .cm-url * {
  cursor: pointer;
}

.k-block-container-type-markdown {
  padding: 0;
}
.k-block-type-markdown-input {
  background: none;
  border-radius: 0;
  padding: 0;
}

.k-markdown-toolbar {
  height: auto;
  min-height: 38px;
}
.k-markdown-toolbar .k-toolbar-divider {
  border: none;
  background-color: var(--toolbar-border); 
}

/* disabled state of toolbar buttons */
.k-markdown-toolbar .k-markdown-button.is-disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* Editor has focus */
.k-markdown-input-wrap:focus-within .k-markdown-toolbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  color: var(--color-text);
  left: 0;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 4;
}
.k-markdown-input-wrap:focus-within .k-markdown-toolbar .k-markdown-button.is-active {
  color: #3872be;
}
.k-markdown-input-wrap:focus-within .k-toolbar .k-markdown-button.is-active:hover {
  background: rgba(66, 113, 174, 0.075);
}

/* Align invisibles button to the right of the toolbar */
.k-markdown-toolbar-button-right {
  border-left: 1px solid var(--color-background);
  margin-left: auto;
}

/** Active state for dropdown items */
.k-markdown-toolbar .k-button.k-dropdown-item[aria-current="true"] {
  color: #8fbfff;
}
.k-markdown-toolbar .k-button-text {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}
.k-markdown-toolbar .k-button-text kbd {
  font-variant-numeric: tabular-nums;
  margin-left: 2.5rem;
  opacity: 0.6;
}






































































































































































































































































































































































































/**
 * General field setup
 */
.k-markdown-input-wrap[data-font-family="sans-serif"] .cm-line {
  --cm-mark: 0 !important;
  --cm-indent: 0 !important;
}

/**
 * 1. Make sure there's no overflow
 */
.k-markdown-input .k-input-element {
  width: 100%; /* 1 */
}

