$tldr-border: 1px solid #333;
$tldr-color: #e8e8d1;
$tldr-label-color: #fff696;
$table-bg: lighten($color-bg, 2%);
$table-bg-alt: lighten($table-bg, 2%);
$table-border-color: $color-very-light-border;
$toc-border: 1px solid #333;
$toc-color: #d1e3e8;
$toc-label-color: #96ccff;
$update-label-color: #96ccff;
$update-border: 1px solid #333;
$caption-color: #bfb1bf;
$bold-color: #e7aeff;
$h2-color: #fffdca;
$h3-color: #d1c5f8;

.meta {
  font-family: $iosevka;
  font-size: $text-small;
}

.tldr,
.toc,
.update {
  border: $tldr-border;
  padding: 5pt 10pt;
  margin-top: 14pt;
  padding-top: 11pt;
  font-family: $iosevka;
  position: relative;
  font-size: 11pt;
  line-height: 1.6;

  @media (max-width: $screen-width) {
    border-left: 0;
    border-right: 0;
  }

  &:before {
    font-weight: bold;
    position: absolute;
    font-size: 8pt;
    left: 4pt;
    top: -8pt;
    background-color: $color-bg;
    padding: 1pt 5pt;
  }
  p:first-child {
    margin-top: 0;
  }
  p:last-child {
    margin-bottom: 0;
  }
}

.tldr {
  color: $tldr-color;

  &:before {
    color: $tldr-label-color;
    content: "TL;DR";
  }
}

.content {
  h2 {
    color: $h2-color;
  }
  h3 {
    color: $h3-color;
  }
  h4 {
    font-size: 14pt;
  }
  strong {
    color: $bold-color;
  }
  table {
    border-collapse: collapse;
    background-color: $table-bg;
    td,
    th {
      padding: 5pt 10pt;
      border: 1px solid $table-border-color;
      font-size: 11pt;
      line-height: 1.5;
    }
    tr:nth-child(even) {
      background-color: $table-bg-alt;
    }
    th {
      font-family: $iosevka;
    }
  }
  figure {
    text-align: center;
    margin: 0;
    padding-top: 1rem;
  }
  figure a,
  figure a:visited,
  figure a:hover {
    background: none;
  }
  figure img {
    max-width: 100%;
  }
  figcaption p {
    text-align: center;
    font-style: italic;
    padding-left: 5pt;
    color: $caption-color;
    margin-top: 0;
  }
  video {
    max-width: 100%;
  }
}

.toc {
  --link-color: #f591e6;
  &:before {
    color: $toc-label-color;
    content: "Table of contents";
    border: $toc-border;
    background-color: $color-bg;
  }
  ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
  }
  ul li::before {
    content: "├─ ";
    font-family: "Courier", monospace;
  }
  ul li:last-child::before {
    content: "└─ ";
  }
  ul li ul li::before {
    content: "│ ├─ ";
  }
  ul li ul li:last-child::before {
    content: "│ └─ ";
  }
  ul li ul li a {
    --link-color: #a991f5;
  }
  ul li:last-child ul li::before {
    content: "  ├─ ";
  }
  ul li:last-child ul li:last-child::before {
    content: "  └─ ";
  }
}

.update {
  &:before {
    color: $update-label-color;
    content: "Update " attr(data-title);
    border: $update-border;
  }
}

.highlight pre {
  overflow-x: auto;
}