$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;

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

.tldr {
  border: $tldr-border;
  padding: 5pt 10pt;
  padding-top: 11pt;
  font-family: $iosevka;
  position: relative;
  font-size: 11pt;
  color: $tldr-color;
  line-height: 1.6;

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

  &:before {
    color: $tldr-label-color;
    content: "TL;DR";
    font-weight: bold;
    position: absolute;
    font-size: 8pt;
    left: 4pt;
    top: -8pt;
    border: $tldr-border;
    background-color: $color-bg;
    padding: 1pt 5pt;
  }
}

.content {
  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;
    }
  }
}