// https://codepen.io/2kool2/pen/MEbeEg

pre[class*="language-"] {
  overflow: auto;
  margin: 0;
  background-color: transparent;
  
  /* Allow space for an overflow ellipsis */
  padding-right: 0.5rem;
  
  /* Allow space for SVG "tear off strip" */
  background-origin: border-box;
  border-left: 1.25rem solid transparent;
  background-size: auto 2.926rem;
  /* Single line does not sit on stripes */
  background-position: top 2.1rem left 0;
  
  /* Allow horizontal resizing - could be adjusted to allow vertical resizing too */
  position: relative;
  resize: horizontal;
  min-width: calc(100% - 3.5rem);
	width: calc(100% + 2.5rem);
	left: -2.5rem;
  
  transition: box-shadow .3s ease-out;
}

code[class*="language-"] {
  font-family: monospace, monospace;
  text-shadow: 0 1px var(--textShadow);
  letter-spacing: 0.01em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;

  /* Safari requirement for contenteditable */
  word-wrap: normal;
  line-height: 1.54;
  tab-size: 2;
  hyphens: none;
}

pre > code[class*="language-"],
pre[class*="language-"] > code {
  display: block;
  padding: 0;

  /* Use an ellipsis to indicate code is wider than the display area */
  text-overflow: ellipsis;
  overflow-x: scroll;
}
pre:hover > code[class*="language-"],
pre:focus-within > code[class*="language-"] {
  outline: none;
  text-overflow: inherit;
}

/* Inline code only */
:not(pre) > code[class*="language-"] {
  font-size: inherit;
  background-position: top right;
  background-size: auto 4rem;
  padding: 0.125em 0.25em;
  white-space: normal;
  word-wrap: nowrap;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
.namespace {
  opacity: 0.7;
}

/* Default colors (Light mode) */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  --color: #33a;
  --textShadow: #fff;
  --comment: #6e6e6e;
  --punctuation: #4e4e4e;
  --property: #905;
  --operator: #70b;
  --selector: #487b00;
  --url: #8d6640;
  --urlBg: hsla(0, 0%, 100%, .5);
  --boolean: #905;
  --atrule: #0075a8;
  --keyword: #0075a8;
  --function: #c93654;
  --regex: #860;
  --boxShadow: hsla(0,0%,0%,.3);
  --focusOutline: hsla(214, 100%, 85%, 1);
  
  --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23fcfcfa' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
}


/* If the OS has dark mode set then... */
/* Change dark to light to test */

@media (prefers-color-scheme: dark) {
  body:not([data-lightMode="light"]) code[class*="language-"]:not([contenteditable]),
  body:not([data-lightMode="light"]) pre[class*="language-"] {
    --color: #6ae;
    --textShadow: #000;

    --comment: #9ab;
    --punctuation: #ccc;
    --property: #e70;
    --operator: #d7f;
    --selector: #8b2;
    --url: #cde;
    --urlBg: rgba(0,0,0,.5);
    --boolean: #a8f;
    --atrule: #ffb;
    --keyword: #fe6;
    --function: #f55;
    --regex: #f91;

    --boxShadow: #000;
    --focusOutline: hsla(214, 100%, 85%, .6);
  
    --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
  }
}

/* Manual switch mode - where implemented */
body[data-lightMode="dark"] code[class*="language-"]:not([contenteditable]),
body[data-lightMode="dark"] pre[class*="language-"] {

  /* Exactly the same as prefers-color-scheme: dark */
  --color: #6ae;
  --textShadow: #000;

  --comment: #9ab;
  --punctuation: #ccc;
  --property: #e70;
  --operator: #d7f;
  --selector: #8b2;
  --url: #cde;
  --urlBg: rgba(0,0,0,.5);
  --boolean: #8af;
  --atrule: #ffb;
  --keyword: #fe6;
  --function: #f55;
  --regex: #f91;

  --boxShadow: #000;
  --focusOutline: hsla(214, 100%, 85%, .6);
  
  --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
}



code[class*="language-"],
pre[class*="language-"] {
  color: var(--color);
  text-shadow: 0 1px var(--textShadow);
}

/* Background image is applied to the pre element on blocks, mainly because it is cropped when applied to the code element. */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-image: var(--codeBgImg);
}
pre[class*="language-"]:hover,
pre[class*="language-"]:focus-within {
  box-shadow: 0 .25rem .25rem var(--boxShadow);
}
pre[class*="language-"]:focus-within {
  outline-offset: calc(-0.25rem - 1px);
  outline: var(--focusOutline) solid 0.25rem;
  z-index: 5;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--comment);
}
.token.punctuation {
  color: var(--punctuation);
}
.token.property,
.token.symbol,
.token.tag,
.token.constant,
.token.deleted {
  color: var(--property);
}
.token.boolean,
.token.number {
  color: var(--boolean);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--selector);
}
.token.operator {
  color: var(--operator);
}
.token.url,
.token.entity,
.language-css .token.string,
.style .token.string {
  color: var(--url);
  background-color: var(--urlBg);
}
.token.atrule,
.token.attr-value {
  color: var(--atrule);
}
.token.keyword {
  color: var(--keyword);
}
.token.function {
  color: var(--function);
}
.token.regex,
.token.important,
.token.variable {
  color: var(--regex);
}



@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}