/*
 * General HTML elements
 */

code,
pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
}

/*
 * Tachyons extras
 */

svg.button {
  /* tachyons blue */
  fill: #357edd
}

svg.button:hover {
  /* tachyons dark-blue  */
  fill: #00449e;
}

.f7 {
  font-size: 12px;
}

/* plaintext for .txt articles */

.plaintext
{
  white-space: pre;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
}

/* Markdown / AsciiDoc
 *
 * Class legend
 *
 * Div containing markdown will have
 * - cljdoc-article - for articles containers only (not docstrings)
 * - cljdoc-markup - for all cljdoc rendered markup containers (docstrings and articles)
 * - markdown - for html rendered from CommonMark
 * - asciidoc - for html rendered from AsciiDoc
 *
 * Much of the the AsciiDoc CSS is carefully poached from:
 * https://raw.githubusercontent.com/asciidoctor/asciidoctor/main/src/stylesheets/asciidoctor.css
 * We try to take only what we need.
*/

.cljdoc-markup a {
  text-decoration: none;
  color: #357edd;
}

.cljdoc-markup a:hover {
  text-decoration: underline;
}

.cljdoc-markup hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

/* Suppress top margin for first paragraph in docstring markdown */
.markdown > p:first-child {
  margin-top: 0;
}

.markdown a.md-anchor {
  color: black;
}

.markdown li + li {
  margin-top: 0.25em;
}

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

.markdown pre,
.literalblock > .content > pre,
.asciidoc .listingblock > .content > pre {
  padding: 1rem;
  background-color: rgb(246, 248, 250);
  border-radius: 3px;
  font-size: 0.875rem;
  overflow-x: auto;
}

.markdown code,
.asciidoc :not(.highlight) > code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}

.markdown pre code {
  padding: 0;
  font-size: 100%;
  background-color: transparent;
}

.asciidoc :not(pre).nobreak {
  word-wrap: normal;
}

.asciidoc :not(pre).nowrap {
  white-space: nowrap;
}

.asciidoc :not(pre).pre-wrap {
  white-space: pre-wrap;
}

.asciidoc pre code,
.asciidoc pre pre {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.asciidoc pre > code {
  display: block;
}

.asciidoc pre.nowrap,
.asciidoc pre.nowrap pre {
  white-space: pre;
  word-wrap: normal;
}

.cljdoc-markup blockquote {
  margin: 0;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  width: fit-content;
}

.cljdoc-markup table {
  border-spacing: 0;
  border-collapse: collapse;
}

.cljdoc-markup table thead,
.cljdoc-markup table tfoot {
  background: rgba(0, 0, 0, 0.025);
}

.asciidoc table {
  margin-bottom: 1.25em;
}

.asciidoc table,
.asciidoc table th,
.asciidoc table tr,
.asciidoc table td {
  border: 0 solid rgba(0, 0, 0, 0.15);
}

.markdown table th,
.markdown table td {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 6px 13px;
}

.asciidoc .stretch {
  width: 100%;
}

.asciidoc p,
.asciidoc th,
.asciidoc td {
  margin: 0;
  padding: 0;
}

.asciidoc p {
  margin-bottom: 1.25rem;
}

.asciidoc .subheader,
.asciidoc .admonitionblock td.content > .title,
.asciidoc .audioblock > .title,
.asciidoc .exampleblock > .title,
.asciidoc .imageblock > .title,
.asciidoc .listingblock > .title,
.asciidoc .literalblock > .title,
.asciidoc .stemblock > .title,
.asciidoc .openblock > .title,
.asciidoc .paragraph > .title,
.asciidoc .quoteblock > .title,
.asciidoc table.tableblock > .title,
.asciidoc .verseblock > .title,
.asciidoc .videoblock > .title,
.asciidoc .dlist > .title,
.asciidoc .olist > .title,
.asciidoc .ulist > .title,
.asciidoc .qlist > .title,
.asciidoc .hdlist > .title {
  line-height: 1.45;
  color: #333;
  font-weight: 400;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 0.25em;
}

.asciidoc .audioblock,
.asciidoc .imageblock,
.asciidoc .literalblock,
.asciidoc .listingblock,
.asciidoc .stemblock,
.asciidoc .videoblock {
  margin-bottom: 1.25em;
}

/*
   AsciiDoctor renders lists like so:

   <div class="ulist">
    <ul>
     <li>
      <p>apples</p>
     </li>
    </ul>
   </div>

   Same idea for qlist and olist.
*/

.asciidoc .ulist li p,
.asciidoc .qlist li p,
.asciidoc .olist li p {
  margin-bottom: 0.2em;
}

/* AsciiDoctor definition list example:

   <div class="dlist">
    <dl>
      <dt class="hdlist1">Clojure</dt>
      <dd>
        <p>Clojure for the JVM</p>
      </dd>
      <dt class="hdlist1">ClojureScript</dt>
      <dd>
        <p>Clojure for JavaScript compiled by the JVM</p>
      </dd>
    </dl>
   </div>

  I think we can go generic here and target all all markdowns
*/

.cljdoc-article dl dt {
  margin-bottom: 0.3125em;
  font-weight: bold;
}

.cljdoc-article dl dd {
  margin-bottom: 1.25em;
  margin-left: 1.125em;
}

/* AsciiDdoctor Description List example:

   <div class="hdlist">
    <table>
     <tbody>
      <tr>
       <td class="hdlist1"> Clojure </td>
       <td class="hdlist2">
         <p>Clojure for the JVM</p>
       </td>
      </tr>
      <tr>
       <td class="hdlist1"> ClojureScript </td>
       <td class="hdlist2">
         <p>Clojure for JavaScript compiled by the JVM</p>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
*/

.asciidoc td.hdlist1,
.asciidoc td.hdlist2 {
  vertical-align: top;
  padding: 0 0.625em;
}

.asciidoc td.hdlist1 {
  font-weight: bold;
  padding-bottom: 1.25em;
}

.asciidoc td.hdlist2 {
  word-wrap: anywhere;
}

/* AsciiDoctor renders attributions (used in quotes and verse blocks):

  <div class="attribution">
   — Yogi Berra<br>
   <cite>life</cite>
  </div>
*/

.asciidoc .verseblock,
.asciidoc .quoteblock {
  width: fit-content;
  margin-bottom: 1.25em;
}

.asciidoc .verseblock div > .paragraph:last-child p,
.asciidoc .quoteblock blockquote > .paragraph:last-child p {
  margin-bottom: 0.2em;
}

.asciidoc .verseblock .attribution,
.asciidoc .quoteblock .attribution {
  margin-top: 0;
  margin-right: 1em;
  text-align: right;
  font-size: 1rem;
  line-height: 1.45;
  font-style: italic;
  color: #555;
}

.asciidoc .quoteblock .attribution br,
.asciidoc .verseblock .attribution br {
  display: none;
}

.asciidoc .quoteblock .attribution cite,
.asciidoc .verseblock .attribution cite {
  display: block;
  color: #777;
}

/** AsciiDoc tables */

.asciidoc table thead tr th,
.asciidoc table thead tr td,
.asciidoc table tfoot tr th,
.asciidoc table tfoot tr td {
  padding: 0.5em 0.625em 0.625em;
  font-size: inherit;
  color: rgb(0 0 0 / 0.8);
  text-align: left;
}

.asciidoc table tr th,
.asciidoc table tr td {
  padding: 0.5625em 0.625em;
  font-size: inherit;
  color: rgb(0 0 0 / 0.8);
}

.asciidoc table.tableblock.fit-content > caption.title {
  white-space: nowrap;
  width: 0;
}

.asciidoc p.tableblock:last-child {
  margin-bottom: 0;
}

.asciidoc td.tableblock > .content {
  margin-bottom: 1.25em;
  word-wrap: anywhere;
}

.asciidoc td.tableblock > .content > :last-child {
  margin-bottom: -1.25em;
}

.asciidoc table.grid-all > * > tr > * {
  border-width: 1px;
}

.asciidoc table.grid-cols > * > tr > * {
  border-width: 0 1px;
}

.asciidoc table.grid-rows > * > tr > * {
  border-width: 1px 0;
}

.asciidoc table.frame-all {
  border-width: 1px;
}

.asciidoc table.frame-ends {
  border-width: 1px 0;
}

.asciidoc table.frame-sides {
  border-width: 0 1px;
}

.asciidoc table.frame-none > colgroup + * > :first-child > *,
table.frame-sides > colgroup + * > :first-child > * {
  border-top-width: 0;
}

.asciidoc table.frame-none > :last-child > :last-child > *,
.asciidoc table.frame-sides > :last-child > :last-child > * {
  border-bottom-width: 0;
}

.asciidoc table.frame-none > * > tr > :first-child,
.asciidoc table.frame-ends > * > tr > :first-child {
  border-left-width: 0;
}

.asciidoc table.frame-none > * > tr > :last-child,
.asciidoc table.frame-ends > * > tr > :last-child {
  border-right-width: 0;
}

.asciidoc th.halign-left,
.asciidoc td.halign-left {
  text-align: left;
}

.asciidoc th.halign-right,
.asciidoc td.halign-right {
  text-align: right;
}

.asciidoc th.halign-center,
.asciidoc td.halign-center {
  text-align: center;
}

.asciidoc th.valign-top,
.asciidoc td.valign-top {
  vertical-align: top;
}

.asciidoc th.valign-bottom,
.asciidoc td.valign-bottom {
  vertical-align: bottom;
}

.asciidoc th.valign-middle,
.asciidoc td.valign-middle {
  vertical-align: middle;
}

.asciidoc table thead th,
.asciidoc table tfoot th {
  font-weight: bold;
}

.asciidoc tbody tr th,
.asciidoc tbody tr th p,
.asciidoc tfoot tr th,
.asciidoc tfoot tr th p {
  color: rgb(0 0 0 / 0.8);
  font-weight: bold;
}

.asciidoc p.tableblock > code:only-child {
  background: none;
  padding: 0;
}

.asciidoc p.tableblock {
  font-size: 1em;
}

/* Asciidoc when asked to via sectlinks attribute, renders section headings as:

   <h2 id="_formatting_marks">
     <a class="link" href="#_formatting_marks">Formatting marks</a>
   </h2>

   As far as I know, it does not use the link class elsewhere.
   Tachyons defines a style for the link class.
   For now we'll match Markdown styling of black.
 */
.asciidoc h1 a,
.asciidoc h2 a,
.asciidoc h3 a,
.asciidoc h4 a,
.asciidoc h5 a,
.asciidoc h6 a {
  color: black;
}

/* Asciidoc table of contents title is rendered as:

   <div id="toctitle">Table of Contents</div>

   Well give it the same ooomph as a level 1 heading (which is rendered as h2)
*/

.asciidoc #toctitle {
  /* mimic h2 defaults */
  font-size: 1.5em;
  font-weight: bolder;
  /* copied from tachyons css */
  box-sizing: border-box;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

/* Asciidoc admonition tip/note blocks

   When adoc icons attribute is set to fonts, example rendering:

   <div class="admonitionblock warning">
     <table>
       <tbody>
         <tr>
           <td class="icon">
             <i title="Warning"></i>
           </td>
           <td class="content">
             Warning to the wise.
           </td>
        </tr>
      </tbody>
    </table>
   </div>

  Mardown alerts are rendered much more simply (by us) like so:

  <div class="markdown-alert markdown-alert-tip">
    <p class="markdown-alert-title">tip</p>
    content
  </div>

*/

/* asciidoc markdown admonition/alert styling */
.markdown .markdown-alert,
.asciidoc .admonitionblock {
  padding: 1rem;
  border-radius: 3px;
  border-left: 3px solid;
  margin-bottom: 1.25em;
}

/* to match asciidoc styling */
.markdown .markdown-alert {
  color: rgb(0 0 0 / 0.8);
}

.markdown .markdown-alert > :nth-child(2) {
  margin-top: 0;
}

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

.asciidoc .admonitionblock table {
  margin: 0;
}

.asciidoc .admonitionblock .icon {
  display: block;
  font-size: 0.8rem;
}

.asciidoc .admonitionblock .icon i {
  text-transform: uppercase;
  color: #777;
  font-weight: 600;
  font-style: normal;
  height: 1em;
}

.asciidoc .admonitionblock .icon i:after {
  content: attr(title);
}

.asciidoc .admonitionblock table tr td {
  padding: 1px;
}

.asciidoc .admonitionblock .content {
  display: block;
}

/* similar to adoc styling but let's keep it separate */
.markdown .markdown-alert-title {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  margin: 0;
}

.asciidoc .admonitionblock.important .icon i:after,
.markdown .markdown-alert-important .markdown-alert-title {
  color: #762a55;
}

.asciidoc .admonitionblock.important,
.markdown .markdown-alert-important {
  background-color: #f8cfe8;
  border-color: #c783aa;
}

.asciidoc .admonitionblock.warning .icon i:after,
.markdown .markdown-alert-warning .markdown-alert-title {
  color: #8f0000;
}

.asciidoc .admonitionblock.warning,
.markdown .markdown-alert-warning {
  background-color: #ffdfdf;
  border-color: #ff725c;
}

.asciidoc .admonitionblock.caution .icon i:after,
.markdown .markdown-alert-caution .markdown-alert-title {
  color: #937d00;
}

.asciidoc .admonitionblock.caution,
.markdown .markdown-alert-caution {
  background-color: #fffceb;
  border-color: #ffd700;
}

.asciidoc .admonitionblock.note .icon i:after,
.markdown .markdown-alert-note .markdown-alert-title {
  color: #00568a;
}

.asciidoc .admonitionblock.note,
.markdown .markdown-alert-note {
  background-color: #cdecff;
  border-color: #357edd;
}


.asciidoc .admonitionblock.tip .icon i:after,
.markdown .markdown-alert-tip .markdown-alert-title {
  color: #0c8657;
}

.asciidoc .admonitionblock.tip,
.markdown .markdown-alert-tip {
  background-color: #e8fdf5;
  border-color: #19a974;
}

/*
 * Callout numbers and lists
 */

.asciidoc .literalblock + .colist,
.listingblock + .colist {
  margin-top: -0.5em;
}

.asciidoc .colist td:not([class]):first-child {
  padding: 0.4em 0.75em 0;
  line-height: 1;
  vertical-align: top;
}

.asciidoc .colist td:not([class]):first-child img {
  max-width: none;
}

.asciidoc .colist td:not([class]):last-child {
  padding: 0.25em 0;
}

.asciidoc .conum[data-value] {
  display: inline-block;
  color: #fff !important;
  background: rgb(0 0 0 / 0.8);
  border-radius: 50%;
  text-align: center;
  font-size: 0.75em;
  width: 1.67em;
  height: 1.67em;
  line-height: 1.67em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  font-style: normal;
  font-weight: bold;
}

.asciidoc .conum[data-value] * {
  color: #fff !important;
}

.asciidoc .conum[data-value] + b {
  display: none;
}

.asciidoc .conum[data-value]::after {
  content: attr(data-value);
}

.asciidoc pre .conum[data-value] {
  position: relative;
  top: -0.125em;
}

.asciidoc b.conum * {
  color: inherit !important;
}

.asciidoc .conum:not([data-value]):empty {
  display: none;
}

/* AsciiDoc sidebar is rendering as:

<div class="sidebarblock">
  <div class="content">
    <div class="title">How much chuck?</div>
    <div class="paragraph">
      <p>How much wood could a woodchuck chuck If a woodchuck could chuck wood? As much wood as a woodchuck could chuck, If a woodchuck could chuck wood.</p>
    </div>
  </div>
</div>

  And example block is similar, the main difference is that the title appears outside the content:

<div class="exampleblock">
  <div class="title">Example 1. I am a sample</div>
  <div class="content">
    <div class="paragraph">
      <p>Do I look like a subdoc?</p>
    </div>
    <div class="paragraph">
      <p>Blah blah</p>
    </div>
  </div>
</div>

*/

/* we don't want these blocks to look like admonitions, so style in white/greytones */
.asciidoc .sidebarblock {
  border: 1px solid #ccc;
  color: #777;
  margin-bottom: 1.25em;
  padding: 0.75em;
  background: #f4f4f4;
  border-radius: 4px;
}

.asciidoc .exampleblock > .content {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 1.25em;
  padding: 0.75em;
  border-radius: 4px;
}

.asciidoc .sidebarblock > :first-child,
.asciidoc .exampleblock > .content > :first-child {
  margin-top: 0;
}

.asciidoc .sidebarblock > :last-child,
.asciidoc .exampleblock > .content > :first-child {
  margin-bottom: 0;
}

.asciidoc .sidebarblock > .content > .title {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.25em;
}

.asciidoc .exampleblock > .content > :last-child > :last-child,
.asciidoc .exampleblock > .content .olist > ol > li:last-child > :last-child,
.asciidoc .exampleblock > .content .ulist > ul > li:last-child > :last-child,
.asciidoc .exampleblock > .content .qlist > ol > li:last-child > :last-child,
.asciidoc .sidebarblock > .content > :last-child > :last-child,
.asciidoc .sidebarblock > .content .olist > ol > li:last-child > :last-child,
.asciidoc .sidebarblock > .content .ulist > ul > li:last-child > :last-child,
.asciidoc .sidebarblock > .content .qlist > ol > li:last-child > :last-child {
  margin-bottom: 0;
}

/*
 * Keyboard
 *
 * Can be as simple as: <kbd>q</kbd>
 */

/* styling for any markup kdb element */
.cljdoc-markup kbd {
  display: inline-block;
  color: #555;
  font-size: 0.875rem;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0 0.15em;
  padding: 0.2em 0.5em;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  white-space: nowrap;
}

/*
  For AsciiDoc can be wrapped in a keyseq:
  <span class="keyseq"><kbd>⌘</kbd>+<kbd>⌥</kbd>+<kbd>space</kbd></span>
*/

.asciidoc .keyseq {
  color: #777;
}

.asciidoc .keyseq kbd:first-child {
  margin-left: 0;
}

.asciidoc .keyseq kbd:last-child {
  margin-right: 0;
}

/* AsciiDoc ui menuseq
<span class="menuseq">
 <b class="menu">View</b>&nbsp;<i class="caret"></i>
 <b class="submenu">Zoom</b>&nbsp;<i class="caret"></i>
 <b class="menuitem">Reset</b>
</span>
*/
.asciidoc .menuseq,
.asciidoc .menuref {
  color: #000;
  font-weight: bold;
}

.asciidoc .menuseq b:not(.caret) {
  font-weight: inherit;
}

.asciidoc .menuseq {
  word-spacing: -0.02em;
}

.asciidoc .menuseq i.caret::before {
  font-weight: bold;
  text-align: center;
  width: 0.45em;
  font-style: normal;
  content: ">";
}

/* AsciiDoc ui button
   <b class="button">OK</b>
*/

.asciidoc b.button::before,
.asciidoc b.button::after {
  position: relative;
  top: -1px;
  font-weight: 400;
}

.asciidoc b.button::before {
  content: "[";
  padding: 0 3px 0 2px;
}

.asciidoc b.button::after {
  content: "]";
  padding: 0 2px 0 3px;
}

/*
 * Scroll Indicator
 */

.def-item.scroll-indicator {
  position: relative;
}

.def-item.scroll-indicator::before {
  border-left: 2px solid rgb(53, 126, 221);
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2rem;
}

/*
 * Highlight.js syntax highlighting
 *
 * original source: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/github-gist.min.css
 */

.hljs {
  display: block;
  /* background: white; */
  /* padding: 0.5em; */
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #a71d5d;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #795da3;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

/*
 * Highlight js copyButtonPlugin support
 */

.hljs-copy-wrapper {
  position: relative;
}

.hljs-copy-wrapper:hover .hljs-copy-button {
  visibility: visible;
}

.hljs-copy-button {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 2rem;
  height: 2rem;
  color: #999;
  border-radius: 0.25rem;
  border: 1px solid #999;
  background-color: #f6f8fa;
  background-image: url(https://microicon-clone.vercel.app/content_paste/999);
  background-repeat: no-repeat;
  background-position: center;
  visibility: hidden;
}

.hljs-copy-button:hover, hljs-copy-button:focus {
  border-color: #357edd;
  background-image: url(https://microicon-clone.vercel.app/content_paste/357edd);
}

.hljs-copy-button[data-copied="false"] {
  text-indent: -9999px; /* Hide the inner text */
}

.hljs-copy-button[data-copied="true"] {
  text-indent: 0px; /* Show the inner text */
  width: auto;
  background-image: none;
}
