/******************************************/
/* Extra CSS variables */

.md-view {
  --markdown-view-inline-padding-top-bottom: 0.22em;
  --markdown-view-inline-padding-left-right: 0.25em;

  --header-1-font-size: 2em;
  --header-2-font-size: 1.6em;
  --header-3-font-size: 1.27em;

  /* Within the indented space, where is the block marker, like a list marker, located. */
  --nested-block-marker-skew: -5px;

  --markdown-view-hairline-width: calc(var(--markdown-view-text-size) / 15);

  /* Used for indentation, but also as margin for heading icons. */
  --md-indentation: 32px;
  /* Minimum required margin for fold toggle icon next to heading icon. */
  --md-min-margin: 22px;
  --md-text-max-width: 48em;

  --md-code-block-padding: 1em;

  /*
    In native Bear, sometimes line height is used, and then the value from
    the template is correct. But sometimes, it instead uses line spacing
    in order to get a nice selection with the text vertically centered.
    In those cases it calculates the line height spacing from the theme
    line height, but the calculation isn't quite correct and if we want
    to use it as a line height we need to multiply with this factor.
    See NSParagraphStyle+CenteredLineHeight.m in Bear. */
  --md-line-height-factor: 1.17;
}

/******************************************/
/* Caret and selection */

.md-view {
  caret-color: var(--markdown-view-cursor-color);
  user-select: text;
}

/* Need to apply the selection color to the container to get consistent
   color in Safari for for level blocks with `position:relative`. */
:has(> .md-view) ::selection {
  background-color: var(--markdown-view-selection-color);
}
:has(> .md-view):not(:focus) ::selection {
  background-color: var(--markdown-view-selection-inactive-color);
}

/******************************************/
/* General settings */

:has(> .md-view) {
  background-color: var(--markdown-view-background-color);
}

.md-view {
  box-sizing: border-box;

  color: var(--markdown-view-text-color);

  font-family: var(--markdown-view-text-font), "Avenir Next", Avenir, sans-serif;
  font-size: var(--markdown-view-text-size);
  line-height: var(--markdown-view-line-height-multiplier);

  width: 100%;
  min-height: max(100%, 300px);

  /* We use padding instead of margin to center the text and to
     enforce a max-width. This makes it possible to set the cursor
     even if clicking on the side of the text. */
  padding: 1.5em
    max(var(--md-min-margin), calc((100% - var(--md-text-max-width)) / 2));

  /* Set padding to get overscroll area. Assumes that the view height
     is close to the viewport height. Preferable we could use a percentage
     of the container hight, but percentage values are based on the
     container width. */
  padding-bottom: 60vh;

  white-space: pre-wrap;
  tab-size: 4;

  overscroll-behavior: contain;
}

.md-view * {
  /* Be explicit about it so any exception is visible in the dingus.
     This mimics the full web app. */
  box-sizing: border-box;
}

.md-view > div {
  /* Need some horizontal margin to fit header icons.
     We could have used view padding, but it is instead used to
     center the text. */
  margin: var(--md-indentation);
}

.md-view > * {
  /* We must not have vertical margin on top level blocks as
     the viewport might not render all blocks and it is not
     included in the client rect height and it can collapse. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.md-view:focus-visible {
  outline: none;
}

@keyframes md-flash-keyframes {
  /* A drop shadow would be nice, but as we might have several
     inlines next to each other, it doesn't look good. Same with
     zoom effect. */
  0% {
    background-color: #ffff0000;
  }
  33% {
    background-color: #ffff00ff;
  }
  67% {
    background-color: #ffff00ff;
  }
  100% {
    background-color: #ffff0000;
  }
}

.md-flash {
  /* Make relative to allow for animated movement. */
  position: relative;
  display: inline-block;

  /* Position atop cursor during flash. */
  z-index: 10;

  animation-name: md-flash-keyframes;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

/* Exclude heading markers to get the right color of
character composition in an empty heading. */
.md-marker:not(.md-heading-marker) {
  color: var(--markdown-view-marker-color);
}

/* Reference link and image markers without a definition
should not not be highlighted as markers. We don't want
to merge this rule with the general marker one, as
it increases the specificity and that makes it harder to
override the general one. */
.md-inert > .md-marker {
  color: inherit;
}

/******************************************/
/* Debug */

.debug .md-space {
  background-color: rgba(0, 89, 255, 0.2);
}

.debug .md-li-marker {
  background-color: rgba(255, 179, 0, 0.2);
  border-inline-start: 1px solid rgba(117, 92, 0, 0.5);
}

.debug .md-block-quote-marker {
  background-color: rgba(34, 255, 0, 0.2);
  border-inline-start: 1px solid rgba(16, 117, 0, 0.5);
}

/******************************************/
/* Paragraphs */

.md-paragraph {
  display: block;
  line-height: calc(
    var(--markdown-view-line-height-multiplier) * var(--md-line-height-factor)
  );
}

/******************************************/
/* Blank lines */

.md-blank-line,
.md-virtual-blank-line {
  line-height: calc(
    var(--markdown-view-line-height-multiplier) * var(--md-line-height-factor)
  );
}

.md-blank-line::before {
  /* Don't collapse line by inserting a zero-width-space. */
  content: "\200B";
}

/******************************************/
/* Headings */

.md-heading {
  /* We would like to use `bold` font on headings and `bolder` on
     headings with strong inline. We also want to use the custom
     Bear font. It works in latin languages but not on fallback
     fonts like Arabic. I have tried different setups, but haven't
     found one that works across browsers. I live it like this
     for the time being. */
  font-family: var(--markdown-view-headers-font), "Avenir Next", Avenir,
    sans-serif;
  display: block;
  line-height: var(--markdown-view-headers-line-height-multiplier);
}

.md-heading-marker,
.md-space:has(+ .md-heading-marker) {
  margin-inline-start: calc(-1 * var(--md-indentation));
}
.md-space + .md-heading-marker {
  margin-inline-start: 0;
}

.md-h1,
.md-h2,
.md-h3,
.md-h4,
.md-h5,
.md-h6 {
  line-height: var(--markdown-view-headers-line-height-multiplier);
  padding-block-start: var(--markdown-view-headers-padding-top-multiplier);
  padding-block-end: var(--markdown-view-headers-padding-bottom-multiplier);
}

.md-h1.md-next-blank,
.md-h2.md-next-blank,
.md-h3.md-next-blank,
.md-h4.md-next-blank,
.md-h5.md-next-blank,
.md-h6.md-next-blank {
  padding-block-end: 0;
}

.md-h1 {
  font-size: var(--header-1-font-size);
}

.md-h2 {
  font-size: var(--header-2-font-size);
}

.md-h3 {
  font-size: var(--header-3-font-size);
}

.md-heading-marker {
  box-sizing: border-box;
  width: 32px;
}

.md-heading-marker img {
  box-sizing: content-box;
  vertical-align: baseline;
  margin-bottom: -2px;
  padding-inline-start: 2px;
  padding-inline-end: 15px;
}

.md-block-quote .md-heading-marker,
.md-li .md-heading-marker {
  margin-inline-start: 0;
}

/******************************************/
/* Lists and block quote (un)indentation */

/* The general strategy is have padding on lists
   and block quotes to get the proper indentation,
   and then a negative margin on spacing and block
   markers to move them to the left. The benefit is
   that if spacing is missing (like lazy continuation
   of paragraphs), we still get the right indentation. */

.md-li,
.md-block-quote {
  padding-inline-start: var(--md-indentation);
}

.md-blank-line {
  margin-inline-start: calc(
    var(--md-margin-correction) * var(--md-indentation)
  );
}

.md-unindent {
  margin-inline-start: calc(var(--md-nest-level) * -1 * var(--md-indentation));
}
.md-code-block-content .md-unindent {
  margin-inline-start: calc(
    var(--md-nest-level) * -1 * var(--md-indentation) -
      var(--md-code-block-padding)
  );
}

.md-space img {
  width: calc(var(--md-nest-width) * var(--md-indentation));
}

/******************************************/
/* Lists */

.md-ul,
.md-ol {
  display: block;
}

.md-li {
  display: list-item;
  list-style: none;
}

.md-li > .md-blank-line::before {
  content: none;
}

.md-li-marker {
  min-width: var(--md-indentation);
  box-sizing: border-box;
}

.md-li-marker.md-icon img {
  box-sizing: content-box;
  margin-inline-start: calc(
    (var(--md-indentation) - var(--md-li-icon-size)) / 2 +
      var(--nested-block-marker-skew)
  );
  margin-inline-end: calc(
    (var(--md-indentation) - var(--md-li-icon-size)) / 2 -
      var(--nested-block-marker-skew)
  );
}

.md-li-marker:not(.md-li-task) img {
  margin-bottom: 1px;
}

.md-li-marker.md-li-task img {
  /* we want the checkbox to be below baseline. */
  margin-bottom: -5px;
  /* Prevent FireFox from selecting the checkbox when clicking on it. */
  user-select: none;
}

/* Ordered lists */

.md-li-marker.md-li-ordered {
  display: inline-block;
  padding-inline-end: 0.4em;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--markdown-view-list-marker-color);

  /* To get the trailing space behave right. */
  white-space: pre;

  /* Don't use size of nested heading. */
  font-size: var(--markdown-view-text-size);
  font-family: var(--markdown-view-text-font), "Avenir Next", Avenir, sans-serif;
}

/* Task lists */

.md-li[role="checkbox"] {
  /* Reset color on nested items. */
  color: var(--markdown-view-text-color);
}
.md-li[aria-checked="true"] {
  color: var(--markdown-view-text-light-color);
}

/******************************************/
/* Blockquote */

.md-block-quote {
  display: block;
  position: relative;
}

.md-block-quote-marker {
  box-sizing: border-box;
  /* Use padding to position marker "content" in the middle, resulting
     in that clicking to the left puts the cursor to the left and vice versa. */
  padding: 0 calc((var(--md-nest-width) * var(--md-indentation)-1) / 2);
}

.md-block-quote-marker > img {
  width: calc(var(--md-nest-width) * var(--md-indentation));
}

.md-code-block-content .md-block-quote-marker.md-unindent > img,
.md-code-block-content .md-space.md-unindent > img {
  width: calc(
    var(--md-nest-width) * var(--md-indentation) + var(--md-code-block-padding)
  );
}

.md-block-quote:not(.md-callout)::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 0.2em;
  inset-inline-start: calc(0.95em + var(--nested-block-marker-skew));
  inset-inline-start: calc(
    (var(--md-indentation) - 4px) / 2 + var(--nested-block-marker-skew)
  );
  inset-inline-start: calc(
    (var(--md-indentation) - 4px) / 2 + var(--nested-block-marker-skew)
  );
  width: 4px;
  height: calc(100% - 0.4em);
  border: 1px solid var(--markdown-view-list-marker-color);
  border-radius: 3px;
  pointer-events: none;
}

.md-block-quote[data-nest-level-alternator="false"]:not(.md-callout)::before {
  background-color: var(--markdown-view-list-marker-color);
}

.md-block-quote[data-nest-level-alternator="true"]:not(.md-callout)::before {
  background-color: transparent;
}

.md-callout {
  padding-top: 0.9em;
  padding-bottom: 0.9em;
  border: 1px solid;
  margin-inline: calc(
    (var(--md-indentation) - 4px) * 0.5 + var(--nested-block-marker-skew)
  );
  border-radius: 3px;
  padding-inline-start: calc(var(--md-indentation) - 9px);
  padding-inline-end: calc(var(--md-indentation) - 9px);
}
.md-view > .md-callout {
  margin-inline: calc(
    var(--md-indentation) + (var(--md-indentation) - 4px) * 0.5 +
      var(--nested-block-marker-skew)
  );
}
.md-callout::before {
  box-sizing: content-box;
  content: "";
  position: absolute;
  top: calc(-1 * var(--markdown-view-hairline-width));
  inset-inline-start: calc(-1 * var(--markdown-view-hairline-width));
  width: 4px;
  height: calc(100% + 2 * var(--markdown-view-hairline-width));
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
  pointer-events: none;
}

.md-callout > .md-callout-head {
  font-family: var(--markdown-view-headers-font), "Avenir Next", Avenir,
    sans-serif;
}
.md-callout > .md-callout-head:not(:last-child) {
  margin-bottom: 0.5em;
}

.md-callout-marker {
  cursor: default;
  padding-left: 0.2em;
  padding-right: 0.5em;
}
/* If there is no space after, we add extra padding as if there was.
   It will be added if the user types anything. */
.md-callout-marker:not(:has(+ .md-space)) {
  padding-inline-end: 0.45em;
}
.md-callout-marker img {
  vertical-align: baseline;
}

.md-callout-note {
  background-color: var(--markdown-view-callout-note-background-color);
  border-color: var(--markdown-view-callout-note-border-color);
}
.md-callout-note::before {
  background-color: var(--markdown-view-callout-note-bar-color);
}
.md-callout-note > .md-callout-head {
  color: var(--markdown-view-highlighter-blue-text-color);
}
.md-callout-note .md-callout-marker > img {
  margin-bottom: -2px;
}

.md-callout-tip {
  background-color: var(--markdown-view-callout-tip-background-color);
  border-color: var(--markdown-view-callout-tip-border-color);
}
.md-callout-tip::before {
  background-color: var(--markdown-view-callout-tip-bar-color);
}
.md-callout-tip > .md-callout-head {
  color: var(--markdown-view-highlighter-green-text-color);
}
.md-callout-tip .md-callout-marker > img {
  margin-bottom: -2px;
}

.md-callout-important {
  background-color: var(--markdown-view-callout-important-background-color);
  border-color: var(--markdown-view-callout-important-border-color);
}
.md-callout-important::before {
  background-color: var(--markdown-view-callout-important-bar-color);
}
.md-callout-important > .md-callout-head {
  color: var(--markdown-view-highlighter-purple-text-color);
}
.md-callout-important .md-callout-marker > img {
  margin-bottom: -4px;
}

.md-callout-warning {
  background-color: var(--markdown-view-callout-warning-background-color);
  border-color: var(--markdown-view-callout-warning-border-color);
}
.md-callout-warning::before {
  background-color: var(--markdown-view-callout-warning-bar-color);
}
.md-callout-warning > .md-callout-head {
  color: var(--markdown-view-highlighter-yellow-text-color);
}
.md-callout-warning .md-callout-marker > img {
  margin-bottom: -2px;
}

.md-callout-caution {
  background-color: var(--markdown-view-callout-caution-background-color);
  border-color: var(--markdown-view-callout-caution-border-color);
}
.md-callout-caution::before {
  background-color: var(--markdown-view-callout-caution-bar-color);
}
.md-callout-caution > .md-callout-head {
  color: var(--markdown-view-highlighter-red-text-color);
}
.md-callout-caution .md-callout-marker > img {
  margin-bottom: -2.5px;
}

/******************************************/
/* Thematic breaks */

.md-thematic-break-placeholder img {
  /* Images works best as inline element, so we use a one pixel image and scale it.
  The added padding it to make it look better when selected. */
  width: 100%;
  height: var(--markdown-view-hairline-width);
  box-sizing: content-box;
  padding-top: calc((1em - var(--markdown-view-hairline-width)) / 2);
  padding-bottom: calc((1em - var(--markdown-view-hairline-width)) / 2);
  vertical-align: middle;
}

[data-browser="safari"] .md-thematic-break-placeholder img {
  /* Safari doesn't scale the image we are using for some reason, so we resort
  to a backup solution. We are hiding the image and then rendering a border instead.
  It will not look as good when selected. */
  padding: 0;
  height: 0;
  border-bottom: var(--markdown-view-hairline-width) solid
    var(--markdown-view-separator-border-color);
}

.md-thematic-break-marker {
  display: none !important;
}

/******************************************/
/* Code, HTML and YAML blocks */

.md-pre {
  display: block;
  font-family: var(--markdown-view-code-font), monospace;
  font-size: var(--markdown-view-code-text-size-multiplier);
  border-radius: 3px;
}

.md-pre.md-indented-code,
.md-pre.md-code-block,
.md-pre.md-yaml {
  color: var(--markdown-view-code-text-color);
  background-color: var(--markdown-view-code-background-color);
  line-height: calc(
    var(--markdown-view-line-height-multiplier) * var(--md-line-height-factor)
  );

  /* Add a gap between code blocks. We can't use margin or CSS that depends
  on previous elements as the viewport must be able to render the blocks
  independently. */
  border-top: 1.5px solid var(--markdown-view-background-color);
  border-bottom: 1.5px solid var(--markdown-view-background-color);
}
.md-callout .md-pre.md-indented-code,
.md-callout .md-pre.md-code-block,
.md-callout .md-pre.md-yaml {
  /* Inside callouts we can't use the background as the callout has
  a different background color. But we can use margin as this is not
  a top level block. */
  border: none;
  margin: 3px 0;
  /* Add a slight border to differentiate it from the callout background. */
  border: var(--markdown-view-hairline-width) solid
    var(--markdown-view-code-border-color);
}

.md-pre.md-indented-code {
  padding-inline-start: var(--md-indentation);
}

.md-view > .md-indented-code .md-space {
  margin-inline-start: calc(-1 * var(--md-indentation));
}

/* Add some padding left and right to get a more balanced look as we
   we have the block marker rows before and after. */
.md-pre.md-yaml {
  padding: 0 var(--md-code-block-padding);
}
/* For fenced code, we can't add the padding on the fenced code block as
   that break list markers when the fenced code is nested inside a list.
   Instead we apply it on the different parts inside. */
.md-code-block-content {
  padding: 0 var(--md-code-block-padding);
}
/* Add padding on first and last line, either on the markers or on
   the space if there is any before the marker. */
.md-code-block-open-marker:first-child,
:not(.md-space) + .md-code-block-open-marker,
:not(.md-space) + .md-code-block-close-marker,
.md-space:has(+ .md-code-block-open-marker),
.md-space:has(+ .md-code-block-close-marker) {
  padding-inline-start: var(--md-code-block-padding);
}

.md-code-block-info {
  color: var(--markdown-view-text-light-color);
}

.md-yaml,
.md-code-block {
  /* Don't fully collapse empty code block. */
  min-height: var(--markdown-view-line-height-multiplier);
}

.md-token.comment,
.md-token.prolog,
.md-token.doctype,
.md-token.cdata {
  color: var(--markdown-view-code-syntax-highlight-comment);
}
.md-token.punctuation,
.md-token.namespace {
  color: var(--markdown-view-text-color);
}
.md-token.constant,
.md-token.property,
.md-token.tag,
.md-token.symbol,
.md-token.deleted,
.md-token.null,
.md-token.datetime {
  color: var(--markdown-view-code-syntax-highlight-constant);
}
.md-token.number,
.md-token.boolean {
  color: var(--markdown-view-code-syntax-highlight-number);
}
.md-token.string,
.md-token.label,
.md-token.triple-quoted-string,
.md-token.selector,
.md-token.attr-value,
.md-token.char,
.md-token.inserted,
.md-token.scalar {
  color: var(--markdown-view-code-syntax-highlight-string);
}
.md-token.entity,
.md-token.macro,
.md-token.operator,
.md-token.url {
  color: var(--markdown-view-code-syntax-highlight-entity);
}
.md-token.keyword,
.md-token.atrule,
.md-token.rule,
.md-token.attr-name,
.md-token.builtin,
.md-token.key {
  color: var(--markdown-view-code-syntax-highlight-keyword);
}
.md-token.function,
.md-token.class-name,
.md-token.class {
  color: var(--markdown-view-code-syntax-highlight-function);
}
.md-token.variable,
.md-token.regex,
.md-token.important,
.md-token.interpolation {
  color: var(--markdown-view-code-syntax-highlight-variable);
}

/******************************************/
/* Inline code */

.md-code {
  font-family: var(--markdown-view-code-font), monospace;
  font-size: var(--markdown-view-code-text-size-multiplier);
  font-weight: normal;
  font-style: normal;
}

.md-code:not([data-language="html"]) {
  padding: var(--markdown-view-inline-padding-top-bottom)
    var(--markdown-view-inline-padding-left-right);
  color: var(--markdown-view-code-text-color);
  background-color: var(--markdown-view-code-background-color);
}

.md-code-marker {
  /* Use this color even inside highlight. */
  color: var(--markdown-view-marker-color) !important;
}

/******************************************/
/* Emphasis and strong */

.md-emphase {
  font-style: italic;
}

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

/******************************************/
/* Highlight */

.md-highlight {
  text-decoration: inherit;
  padding: var(--markdown-view-inline-padding-top-bottom)
    var(--markdown-view-inline-padding-left-right);
  unicode-bidi: embed;
  border-radius: 0.2em;
}

.md-heading .md-highlight {
  padding-top: 0;
  padding-bottom: 0;
}

.md-highlight-icon {
  box-sizing: content-box;
  padding-inline-start: 0.1em;
  padding-inline-end: 0.1em;
  margin-bottom: -0.15em;
  height: 1em;
  width: calc(1em / 14 * 15);
  cursor: default;
}

.md-highlight-default {
  color: var(--markdown-view-highlighter-default-text-color);
  background-color: var(--markdown-view-highlighter-default-background-color);
}
.md-highlight-default .md-marker {
  color: var(--markdown-view-highlighter-default-marker-text-color);
}

.md-highlight-red {
  color: var(--markdown-view-highlighter-red-text-color);
  background-color: var(--markdown-view-highlighter-red-background-color);
}
.md-highlight-red .md-marker {
  color: var(--markdown-view-highlighter-red-marker-text-color);
}

.md-highlight-blue {
  color: var(--markdown-view-highlighter-blue-text-color);
  background-color: var(--markdown-view-highlighter-blue-background-color);
}
.md-highlight-blue .md-marker {
  color: var(--markdown-view-highlighter-blue-marker-text-color);
}

.md-highlight-green {
  color: var(--markdown-view-highlighter-green-text-color);
  background-color: var(--markdown-view-highlighter-green-background-color);
}
.md-highlight-green .md-marker {
  color: var(--markdown-view-highlighter-green-marker-text-color);
}

.md-highlight-yellow {
  color: var(--markdown-view-highlighter-yellow-text-color);
  background-color: var(--markdown-view-highlighter-yellow-background-color);
}
.md-highlight-yellow .md-marker {
  color: var(--markdown-view-highlighter-yellow-marker-text-color);
}

.md-highlight-purple {
  color: var(--markdown-view-highlighter-purple-text-color);
  background-color: var(--markdown-view-highlighter-purple-background-color);
}
.md-highlight-purple .md-marker {
  color: var(--markdown-view-highlighter-purple-marker-text-color);
}

/******************************************/
/* Underline and strike through */

.md-underline {
  text-decoration: underline;
  text-decoration-color: var(--markdown-view-accent-color);
  unicode-bidi: embed;
}

.md-strikethrough {
  text-decoration: line-through;
  color: var(--markdown-view-base-text-secondary-color);
}

/******************************************/
/* Links, Wiki links, and images */

a.md-link-text,
.md-wiki-text,
.md-wiki-alias,
.md-hashtag,
.md-autolink-text,
.md-url,
.md-email,
.md-footnote-label,
.md-link-definition-destination {
  /* In general, we try to use only spans and divs for elements,
  but an `a` tag has many behaviors connected to it that we want
  to keep. So we try to set the most common styles. */
  color: var(--markdown-view-link-color);
  unicode-bidi: embed;
  text-decoration: none;
  cursor: pointer;

  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  background-color: inherit;
  margin: 0;
  padding: 0;
  border: none;
}
a.md-link-text:hover,
.md-wiki-text:hover,
.md-wiki-alias:hover,
.md-hashtag:hover,
.md-autolink-text:hover,
.md-url:hover,
.md-email:hover,
.md-footnote-label:hover,
.md-link-definition-destination:hover {
  color: var(--markdown-view-link-color);
  text-decoration: none;
  cursor: pointer;
}
.md-link-label {
  cursor: pointer;
}

.md-link-icon {
  box-sizing: content-box;
  padding-inline-start: 0.23em;
  padding-inline-end: 0.23em;
  cursor: default;
}

.md-link-icon img {
  margin-bottom: -0.05em;
  height: 0.8em;
  width: calc(0.8em / 12 * 13);
}

.md-image {
  display: inline-block;
}

.md-image img {
  margin-top: 0.5em;
  max-width: 100%;
}

/******************************************/
/* Link definitions */

.md-link-definition {
  display: block;
}

.md-link-definition-title {
  color: var(--markdown-view-text-light-color);
}

.md-link-definition-separator {
  display: inline;
}

/******************************************/
/* Footnotes */

.md-footnote {
  display: block;
}

.md-footnote-separator {
  display: inline;
}

.md-footnote-ref {
  font-size: 0.9em;
  vertical-align: super;
}

/******************************************/
/* Entities */

.md-entity {
  direction: ltr;
  unicode-bidi: embed;
  color: var(--markdown-view-code-syntax-highlight-entity);
}

/******************************************/
/* backslash escapes */

.md-escape {
  unicode-bidi: embed;
}

/******************************************/
/* Color */

.md-color {
  font-family: var(--markdown-view-code-font), monospace;
  font-size: var(--markdown-view-code-text-size-multiplier);
  padding-inline-start: 1.2em;
  position: relative;
  direction: ltr;
  unicode-bidi: embed;
}

.md-color::before {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  left: 0em;
  bottom: 0em;
  transform: translateY(-8%);
  box-sizing: border-box;
  border: var(--markdown-view-hairline-width) solid rgb(0, 0, 0, 0.3);
  border-radius: 1.1em;
  background-color: var(--md-color);
}

/******************************************/
/* Hashtag */

.md-hashtag,
.md-hashtag:hover {
  color: var(--markdown-view-tag-text-color);
  background-color: var(--markdown-view-tag-background-color);
  border-radius: 1em;
  padding: calc(
      var(--markdown-view-inline-padding-top-bottom) - 2 *
        var(--markdown-view-hairline-width)
    )
    calc(var(--markdown-view-inline-padding-left-right) + 0.3em);
  unicode-bidi: embed;
}

.md-hashtag > .md-marker {
  color: var(--markdown-view-tag-marker-color);
  padding: 0;
}

.md-heading .md-hashtag {
  padding-top: 0;
  padding-bottom: 0;
}

/******************************************/
/* Table */

.md-table-wrapper {
  padding: 0.5em 0;
}

.md-table {
  display: inline-block; /* To allow for overflow with scroll bars (table doesn't allow this). */
  box-sizing: border-box;
  max-width: 100%;
  vertical-align: bottom;
  position: relative;
  overflow-x: auto;
  border-collapse: separate; /* Can't use border collapse with rounded corners. */
  border-spacing: 0;
  border: var(--markdown-view-hairline-width) solid
    var(--markdown-view-table-border-color);
  border-radius: 0.25em;
}

.md-tr {
  display: table-row;
  background-color: var(--markdown-view-table-cell-background-color);
}

.md-tr:nth-child(odd) {
  background-color: var(--markdown-view-table-cell-alternate-background-color);
}

.md-tr.md-header-row {
  font-weight: bold;
}

.md-td {
  box-sizing: content-box;
  display: table-cell;
  padding: 0.37em 0.9em;
  min-width: 9em;
  /* Don't fully collapse empty cell. Height is used over min-height for table cells. */
  height: calc(
    var(--markdown-view-line-height-multiplier) * var(--md-line-height-factor)
  );

  white-space: pre;
}

.md-td + .md-td {
  border-left: var(--markdown-view-hairline-width) solid
    var(--markdown-view-table-border-color);
}
.md-table[dir="rtl"] .md-td + .md-td {
  border-left: none;
  border-right: var(--markdown-view-hairline-width) solid
    var(--markdown-view-table-border-color);
}

.md-td .md-text:empty::before {
  /* We use an empty span for space nodes inside empty table cells.
     This will make it have a height and be positioned right inside the cell. */
  content: "\feff"; /* ZERO WIDTH NO-BREAK SPACE */
}

.md-td[data-alignment="1"] {
  text-align: start;
}

.md-td[data-alignment="2"] {
  text-align: end;
}

.md-td[data-alignment="3"] {
  text-align: center;
}

/******************************************/
/* Folding */

.md-fold-marker > img {
  box-sizing: content-box;
  padding: 0 7px;
  padding-bottom: 1px;
  vertical-align: middle;
}

[data-folded] {
  display: none;
}

/******************************************/
/* Line wrap exceptions. */

/* Keep markers together with the neighboring text. */
.md-strong,
.md-emphase,
.md-underline,
.md-strikethrough,
.md-highlight,
.md-code,
.md-wikilink {
  white-space: pre;

  & *:not(:first-child):not(:last-child) {
    white-space: pre-wrap;
  }
}

/* Prevent line breaks. Unfortunately, if the element is
  longer than the page width, it will overflow unlike the native
  app. We expect too long tags to be rare, so we accept this
  as a trade-off. */
.md-hashtag {
  white-space: pre;
}

/* Links may break in the link text. */
.md-link,
.md-image {
  white-space: pre;
}
.md-link-text {
  white-space: pre-wrap;
}