site/src/style/markdown.less
@font-face {
  font-family: octicons-link;
  src: url('data:font/woff;charset=utf-8;base64,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')
    format('woff');
}

.markdown-body .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}

.markdown-body .anchor {
  float: left;
  line-height: 1;
  margin-left: -20px;
  padding-right: 4px;
}

.markdown-body .anchor:focus {
  outline: none;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
  color: #282f38;
  vertical-align: middle;
  visibility: hidden;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
  text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  visibility: visible;
}

.markdown-body {
  text-size-adjust: 100%;
  line-height: 1.5;
  font-size: 14px;
  word-wrap: break-word;
}

.markdown-body .pl-c {
  color: #6a737d;
}

.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #005cc5;
}

.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #6f42c1;
}

.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
  color: #24292e;
}

.markdown-body .pl-ent {
  color: #22863a;
}

.markdown-body .pl-k {
  color: #d73a49;
}

.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
  color: #032f62;
}

.markdown-body .pl-smw,
.markdown-body .pl-v {
  color: #e36209;
}

.markdown-body .pl-bu {
  color: #b31d28;
}

.markdown-body .pl-ii {
  background-color: #b31d28;
  color: #fafbfc;
}

.markdown-body .pl-c2 {
  background-color: #d73a49;
  color: #fafbfc;
}

.markdown-body .pl-c2::before {
  content: '^M';
}

.markdown-body .pl-sr .pl-cce {
  color: #22863a;
  font-weight: 700;
}

.markdown-body .pl-ml {
  color: #735c0f;
}

.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  color: #005cc5;
  font-weight: 700;
}

.markdown-body .pl-mi {
  color: #24292e;
  font-style: italic;
}

.markdown-body .pl-mb {
  color: #24292e;
  font-weight: 700;
}

.markdown-body .pl-md {
  background-color: #ffeef0;
  color: #b31d28;
}

.markdown-body .pl-mi1 {
  background-color: #f0fff4;
  color: #22863a;
}

.markdown-body .pl-mc {
  background-color: #ffebda;
  color: #e36209;
}

.markdown-body .pl-mi2 {
  background-color: #005cc5;
  color: #f6f8fa;
}

.markdown-body .pl-mdr {
  color: #6f42c1;
  font-weight: 700;
}

.markdown-body .pl-ba {
  color: #586069;
}

.markdown-body .pl-sg {
  color: #959da5;
}

.markdown-body .pl-corl {
  color: #032f62;
  text-decoration: underline;
}

.markdown-body details {
  display: block;
}

.markdown-body summary {
  display: list-item;
}

.markdown-body a {
  background-color: transparent;
}

.markdown-body a:active,
.markdown-body a:hover {
  outline-width: 0;
}

.markdown-body strong {
  font-weight: inherit;
  font-weight: bolder;
}

.markdown-body img {
  border-style: none;
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: Menlo, Consolas;
  font-size: 1em;
}

.markdown-body hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

.markdown-body [type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}

.markdown-body * {
  box-sizing: border-box;
}

.markdown-body strong {
  font-weight: 500;
}

.markdown-body hr {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfe2e5;
  height: 0;
  margin: 15px 0;
  overflow: hidden;
}

.markdown-body hr::before {
  content: '';
  display: table;
}

.markdown-body hr::after {
  clear: both;
  content: '';
  display: table;
}

.markdown-body details summary {
  cursor: pointer;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-weight: 500;
  color: var(--color-text-1);
}

.markdown-body h1 {
  font-size: 36px;
  margin: 36px 0 20px;
}

.markdown-body h2 {
  font-size: 24px;
  margin: 28px 0 12px;
}

.markdown-body h3 {
  font-size: 20px;
  margin: 24px 0 12px;
}

.markdown-body h4 {
  font-size: 16px;
  margin: 24px 0 12px;
}

.markdown-body h5 {
  font-size: 14px;
  margin: 20px 0 12px;
}

.markdown-body h6 {
  font-size: 14px;
  margin: 16px 0 8px;
}

.markdown-body p {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.85;
}

.markdown-body blockquote {
  margin: 0;
}

.markdown-body ol,
.markdown-body ul {
  list-style: circle;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}

.markdown-body ul ul,
.markdown-body ol ul {
  list-style-type: disc;
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}

.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
  list-style-type: lower-alpha;
  line-height: 22px;
}

.markdown-body dd {
  margin-left: 0;
}

.markdown-body code,
.markdown-body pre {
  font-family: Menlo, Consolas;
  font-size: 12px;
}

.markdown-body pre {
  margin-bottom: 0;
  margin-top: 0;
}

.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.markdown-body .border {
  border: 1px solid #e1e4e8 !important;
}

.markdown-body .border-0 {
  border: 0 !important;
}

.markdown-body .border-bottom {
  border-bottom: 1px solid #e1e4e8 !important;
}

.markdown-body .rounded-1 {
  border-radius: 3px !important;
}

.markdown-body .bg-white {
  background-color: #fff !important;
}

.markdown-body .bg-gray-light {
  background-color: #fafbfc !important;
}

.markdown-body .text-gray-light {
  color: #6a737d !important;
}

.markdown-body .mb-0 {
  margin-bottom: 0 !important;
}

.markdown-body .my-2 {
  margin-bottom: 8px !important;
  margin-top: 8px !important;
}

.markdown-body .pl-0 {
  padding-left: 0 !important;
}

.markdown-body .py-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.markdown-body .pl-1 {
  padding-left: 4px !important;
}

.markdown-body .pl-2 {
  padding-left: 8px !important;
}

.markdown-body .py-2 {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

.markdown-body .pl-3,
.markdown-body .px-3 {
  padding-left: 16px !important;
}

.markdown-body .px-3 {
  padding-right: 16px !important;
}

.markdown-body .pl-4 {
  padding-left: 24px !important;
}

.markdown-body .pl-5 {
  padding-left: 32px !important;
}

.markdown-body .pl-6 {
  padding-left: 40px !important;
}

.markdown-body .f6 {
  font-size: 12px !important;
}

.markdown-body .lh-condensed {
  line-height: 1.25 !important;
}

.markdown-body .text-bold {
  font-weight: 500 !important;
}

.markdown-body::before {
  content: '';
  display: table;
}

.markdown-body::after {
  clear: both;
  content: '';
  display: table;
}

.markdown-body > :first-child {
  margin-top: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body blockquote,
.markdown-body dl,
.markdown-body ol,
.markdown-body pre,
.markdown-body ul {
  margin: 16px 0;
}

.markdown-body hr {
  background-color: #e1e4e8;
  border: 0;
  height: 1px;
  margin: 24px 0;
  padding: 0;
}

.markdown-body blockquote {
  border-left: 0.25em solid #dfe2e5;
  color: #6a737d;
  padding: 0 1em;
}

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

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

.markdown-body kbd {
  background-color: #fafbfc;
  border: 1px solid #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
  color: #444d56;
  display: inline-block;
  font-size: 11px;
  line-height: 10px;
  padding: 3px 5px;
  vertical-align: middle;
}

.markdown-body ol,
.markdown-body ul {
  padding-left: 2em;
}

.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
  margin-bottom: 0;
  margin-top: 0;
}

.markdown-body li {
  word-wrap: break-word;
  line-height: 22px;
}

.markdown-body li > p {
  margin-top: 16px;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  font-size: 1em;
  font-style: italic;
  font-weight: 500;
  margin-top: 16px;
  padding: 0;
}

.markdown-body dl dd {
  margin-bottom: 16px;
  padding: 0 16px;
}

.markdown-body img {
  background-color: #fff;
  box-sizing: content-box;
  max-width: 100%;
}

.markdown-body img[align='right'] {
  padding-left: 20px;
}

.markdown-body img[align='left'] {
  padding-right: 20px;
}

.markdown-body code {
  padding: 2px 8px;
  border-radius: 2px;
  background-color: #e6e8eb;
  margin: 0 4px;
  color: #606a78;
}

.markdown-body pre {
  word-wrap: normal;
}

.markdown-body pre > code {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  white-space: pre;
  word-break: normal;
}

.markdown-body .highlight {
  margin-bottom: 16px;
}

.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markdown-body .highlight pre,
.markdown-body pre {
  background-color: #f5f6f7;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.45;
  overflow: auto;
  padding: 24px;
}

.markdown-body pre code {
  background-color: transparent;
  border: 0;
  display: inline;
  line-height: 2;
  margin: 0;
  max-width: none;
  overflow: visible;
  padding: 0;
  word-wrap: normal;
}

.markdown-body .commit-tease-sha {
  color: #444d56;
  display: inline-block;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 90%;
}

.markdown-body .blob-wrapper {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  overflow-x: auto;
  overflow-y: hidden;
}

.markdown-body .blob-wrapper-embedded {
  max-height: 240px;
  overflow-y: auto;
}

.markdown-body .blob-num {
  color: rgba(27, 31, 35, 30%);
  cursor: pointer;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 12px;
  line-height: 20px;
  min-width: 50px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}

.markdown-body .blob-num:hover {
  color: rgba(27, 31, 35, 60%);
}

.markdown-body .blob-num::before {
  content: attr(data-line-number);
}

.markdown-body .blob-code {
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  vertical-align: top;
}

.markdown-body .blob-code-inner {
  color: #24292e;
  font-family: Menlo, Consolas;
  font-size: 12px;
  overflow: visible;
  white-space: pre;
  word-wrap: normal;
}

.markdown-body .pl-token.active,
.markdown-body .pl-token:hover {
  background: #ffea7f;
  cursor: pointer;
}

.markdown-body kbd {
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-bottom-color: #c6cbd1;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #c6cbd1;
  color: #444d56;
  display: inline-block;
  font: 11px SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  line-height: 10px;
  padding: 3px 5px;
  vertical-align: middle;
}

.markdown-body :checked + .radio-label {
  border-color: #0366d6;
  position: relative;
  z-index: 1;
}

.markdown-body .tab-size[data-tab-size='1'] {
  tab-size: 1;
}

.markdown-body .tab-size[data-tab-size='2'] {
  tab-size: 2;
}

.markdown-body .tab-size[data-tab-size='3'] {
  tab-size: 3;
}

.markdown-body .tab-size[data-tab-size='4'] {
  tab-size: 4;
}

.markdown-body .tab-size[data-tab-size='5'] {
  tab-size: 5;
}

.markdown-body .tab-size[data-tab-size='6'] {
  tab-size: 6;
}

.markdown-body .tab-size[data-tab-size='7'] {
  tab-size: 7;
}

.markdown-body .tab-size[data-tab-size='8'] {
  tab-size: 8;
}

.markdown-body .tab-size[data-tab-size='9'] {
  tab-size: 9;
}

.markdown-body .tab-size[data-tab-size='10'] {
  tab-size: 10;
}

.markdown-body .tab-size[data-tab-size='11'] {
  tab-size: 11;
}

.markdown-body .tab-size[data-tab-size='12'] {
  tab-size: 12;
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item + .task-list-item {
  margin-top: 3px;
}

.markdown-body .task-list-item input {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}

.markdown-body hr {
  border-bottom-color: #eee;
}

.markdown-body .pl-0 {
  padding-left: 0 !important;
}

.markdown-body .pl-1 {
  padding-left: 4px !important;
}

.markdown-body .pl-2 {
  padding-left: 8px !important;
}

.markdown-body .pl-3 {
  padding-left: 16px !important;
}

.markdown-body .pl-4 {
  padding-left: 24px !important;
}

.markdown-body .pl-5 {
  padding-left: 32px !important;
}

.markdown-body .pl-6 {
  padding-left: 40px !important;
}

.markdown-body .pl-7 {
  padding-left: 48px !important;
}

.markdown-body .pl-8 {
  padding-left: 64px !important;
}

.markdown-body .pl-9 {
  padding-left: 80px !important;
}

.markdown-body .pl-10 {
  padding-left: 96px !important;
}

.markdown-body .pl-11 {
  padding-left: 112px !important;
}

.markdown-body .pl-12 {
  padding-left: 128px !important;
}

/** -----------Custom-------------- */
.markdown-body {
  &.api-container {
    table {
      td:nth-child(3),
      td:nth-child(3) > code,
      td:nth-child(4) > code {
        color: #cb1e83;
      }

      td:nth-child(3),
      td:nth-child(4) {
        code {
          border: none;
        }
      }
    }
  }

  ul {
    padding-left: 24px;
    margin: 0;
  }

  li {
    color: #1d252f;
    line-height: 2;
    margin: 0;
    padding: 0;
  }

  pre.code_block {
    border: 1px solid #e6e8eb;
  }

  table {
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 20px;
    border: 1px solid #e5e6e8;
    border-radius: 2px;

    thead {
      th {
        line-height: 22px;
        text-align: left;
        color: #606a78;
        font-weight: 500;
        border-right: 1px solid #e5e6e8;
        background-color: var(--color-fill-2);
      }

      th:last-child {
        border-right: none;
      }
    }

    tr {
      text-align: left;
      height: 40px;
    }

    th {
      font-weight: 500;
      text-align: left;
      height: 40px;
    }

    td,
    th {
      padding: 8px 12px;
      text-align: left;
      line-height: 1.8;
      height: 40px;
      border-bottom: 1px solid #e5e6e8;
    }

    tr:last-child td {
      border-bottom: none;
    }
  }
}

.code-preview h2 {
  color: var(--color-text-1);
}

.markdown-body {
  color: var(--color-fill-2);
}

.markdown-body p,
.code-preview p,
.code-preview li {
  color: var(--color-text-2);
}

.markdown-body table {
  background-color: var(--color-bg-1);
  border-color: var(--color-border);
}

.markdown-body table thead th {
  border-color: var(--color-border);
  color: var(--color-text-1);
  white-space: nowrap;
}

.markdown-body table td,
.markdown-body table th {
  border-color: var(--color-border);
  color: var(--color-text-1);
  line-height: 1.8;
}

.markdown-body table td:nth-child(3) > code,
.markdown-body table td:nth-child(4) > code {
  background-color: unset;
}

.api-container table td:nth-child(1) {
  width: 20%;
  max-width: 180px;
}

.api-container table td:nth-child(2) {
  width: 45%;
  max-width: 300px;
}

.api-container table td:nth-child(3) {
  width: 20%;
}

.api-container table td:nth-child(4) {
  width: 15%;
}

.api-container table td:nth-child(5) {
  width: 10%;
  max-width: 100px;
}

.markdown-body code,
.markdown-body pre,
.codebox-wrapper .code-preview code,
.markdown-body pre.code_block {
  font-family: Menlo, Consolas;
  font-size: 12px;
  color: var(--color-text-2);
  border: 1px solid var(--color-neutral-2);
  background-color: var(--color-neutral-2);
}

.codebox-wrapper .code-preview code {
  margin: 0 4px;
}

.markdown-body ul,
.markdown-body li {
  color: var(--color-text-2);
}

/**
 * Highlight
 * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
 * @author Tim  Shedor
 */

code[class*='language-'],
pre[class*='language-'] {
  color: var(--color-text-2);
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
  position: relative;
  margin: 0.5em 0;
  overflow: visible;
  padding: 0;
}

pre[class*='language-'] > code {
  position: relative;
  border-left: 10px solid #358ccb;
  box-shadow: -1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf;
  background-color: #fdfdfd;
  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 4%) 50%);
  background-size: 3em 3em;
  background-origin: content-box;
  background-attachment: local;
}

code[class*='language'] {
  max-height: inherit;
  height: inherit;
  padding: 0 1em;
  display: block;
  overflow: auto;
  direction: ltr;
}

/* Margin bottom to accomodate shadow */
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background-color: #fdfdfd;
  box-sizing: border-box;
  margin-bottom: 1em;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  position: relative;
  padding: 0.2em;
  border-radius: 0.3em;
  color: rgb(var(--red-6));
  border: 1px solid rgba(0, 0, 0, 10%);
  display: inline;
  white-space: normal;
}

pre[class*='language-']::before,
pre[class*='language-']::after {
  content: '';
  z-index: -2;
  display: block;
  position: absolute;
  bottom: 0.75em;
  left: 0.18em;
  width: 40%;
  height: 20%;
  max-height: 13em;
  box-shadow: 0 13px 8px #979797;
  transform: rotate(-2deg);
}

:not(pre) > code[class*='language-']::after,
pre[class*='language-']::after {
  right: 0.75em;
  left: auto;
  transform: rotate(2deg);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-text-2);
}

.token.punctuation {
  color: rgb(var(--arcoblue-6));
}

.token.property,
.token.tag,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
  color: rgb(var(--arcoblue-6));
}

.token.boolean,
.token.number,
.token.string,
.token.char,
.token.selector,
.token.attr-name,
.token.function,
.token.builtin,
.token.inserted {
  color: rgb(var(--purple-6));
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: rgb(var(--gold-6));
}

.token.atrule,
.token.attr-value,
.token.class-name,
.token.keyword {
  color: rgb(var(--green-6));
}

.token.regex,
.token.important {
  color: rgb(var(--orange-6));
}

.language-css .token.string,
.style .token.string {
  color: rgb(var(--gold-6));
}

.token.important {
  font-weight: normal;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.namespace {
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  pre[class*='language-']::before,
  pre[class*='language-']::after {
    bottom: 14px;
    box-shadow: none;
  }
}

/* Plugin styles */
.token.tab:not(:empty)::before,
.token.cr::before,
.token.lf::before {
  color: #e0d7d1;
}

/* Plugin styles: Line Numbers */
pre[class*='language-'].line-numbers.line-numbers {
  padding-left: 0;
}

pre[class*='language-'].line-numbers.line-numbers code {
  padding-left: 3.8em;
}

pre[class*='language-'].line-numbers.line-numbers .line-numbers-rows {
  left: 0;
}

/* Plugin styles: Line Highlight */
pre[class*='language-'][data-line] {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

pre[data-line] code {
  position: relative;
  padding-left: 4em;
}

pre .line-highlight {
  margin-top: 0;
}

// custom
.markdown-body h1 > code,
.markdown-body h2 > code,
.markdown-body h3 > code,
.markdown-body h4 > code,
.markdown-body h5 > code {
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.markdown-img-layout-2 {
  width: 80%;
  max-width: 850px;
  min-width: 400px;

  img {
    width: 48%;
    margin-right: 2%;
  }
}

html.rtl {
  pre.code_block {
    direction: ltr;
  }
}
