Markdown.css

@reference "tailwindcss";
@reference "../../styles/theme.css";
@import "./prism-theme.css";

/*
  Local constants (previously Sass variables):
  $bannerHeight: 56px
  $navigationHeight: 56px
  $navigationSubHeight: 28px
  $someExtraHeight: 10px
  $topHeightDesktop: 94px  (56 + 28 + 10)
  $topHeightMobile: 56px
*/

.markdown {
  @apply leading-normal;

  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-3xl;
  }
  h3 {
    @apply text-2xl;
  }
  h4 {
    @apply text-xl;
  }
  h5 {
    @apply text-base;
  }
  h6 {
    @apply text-sm;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    > span[id] {
      @apply absolute w-0 block invisible pointer-events-none pt-14 -mt-14;
      @media (min-width: 768px) {
        @apply pt-[94px] -mt-[94px];
      }
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply block font-semibold text-heading-dark leading-[1.4];
    font-family:
      "Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
      serif;
    margin: 0 0 0.25em;
    word-break: break-word;

    tt,
    code {
      font-size: 90%;
      color: inherit;
    }

    a[aria-hidden="true"] {
      @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
      transition: all 250ms;
    }

    &:hover a[aria-hidden="true"] {
      @apply opacity-100 visible;
    }
  }

  h1:first-child {
    margin: 0;
    @apply leading-none;
  }

  p,
  blockquote,
  aside,
  table,
  pre {
    @apply my-[1em];
  }

  ul,
  ol,
  dl {
    @apply mt-[0.5em] mb-[1em];
  }

  li {
    @apply my-[0.5em];
  }

  hr {
    @apply border-none bg-gray-200 h-[3px] my-[2em];
  }

  ul,
  ol {
    @apply pl-[30px];
    list-style: revert;

    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }

  dl {
    dt {
      @apply text-base font-bold italic mt-[15px] mb-[5px];

      &:first-child {
        padding: 0;
      }
    }

    dd {
      @apply mb-[15px] px-[15px];
    }

    dt,
    dd {
      > :first-child {
        margin-top: 0;
      }
      > :last-child {
        margin-bottom: 0;
      }
    }
  }

  aside {
    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
    > :first-child {
      margin-top: 0;
    }
    > :last-child {
      margin-bottom: 0;
    }
    &.tip,
    &.warning,
    &.preview,
    &.todo {
      @apply border-l-[3px];

      .tip-content {
        @apply italic;
      }

      code {
        color: inherit;
      }

      > .tip__prefix,
      > .warning__prefix,
      > .preview__prefix,
      > .todo__prefix {
        @apply capitalize font-semibold block text-base text-aside-prefix mb-[0.25em];
      }
    }

    &.tip {
      @apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
    }

    &.warning {
      @apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
    }

    &.preview {
      @apply bg-gray-100 text-aside-warning-text border-l-brand-blue;
    }

    &.todo {
      @apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;

      .tip-content::before {
        content: "[TODO]: ";
        font-style: normal;
      }
    }
  }

  blockquote {
    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;

    > :first-child {
      margin-top: 0;
    }
    > :last-child {
      margin-bottom: 0;
    }
  }

  table {
    @apply my-[1em];

    @media (min-width: 768px) {
      @apply block overflow-x-auto overflow-y-hidden;
    }

    p {
      margin: 0;
    }

    code {
      padding-top: 0;
    }
  }

  thead {
    @apply hidden;
    @media (min-width: 768px) {
      display: table-header-group;
    }
  }

  th {
    @apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;

    &:last-child {
      @apply border-r-0;
    }
  }

  tr {
    @apply border border-solid border-table-border block mb-2.5;

    &:nth-child(2n) {
      @apply bg-table-row-alt;
    }

    &:last-child {
      @apply border-b border-b-table-border;
    }

    @media (min-width: 768px) {
      @apply mb-0;
      display: table-row;
    }
  }

  td {
    @apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;
    &::before {
      content: attr(data-th);
      @apply font-bold;
    }
    &:last-child {
      @apply border-b-0;
    }
    @media (min-width: 768px) {
      display: table-cell;
      @apply py-3.5 px-[22px];
      text-align: unset;
      &::before {
        content: none;
      }
      @apply border-r border-r-table-border border-b-0;
      &:last-child {
        @apply border-r-0;
      }
    }
  }

  img:not([class*="support__"]) {
    @apply max-w-full h-auto;
  }

  b,
  strong {
    font-weight: 600;
  }

  i,
  em {
    @apply italic;
  }

  code,
  tt {
    font-family:
      "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    @apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  a {
    @apply text-brand-link;
    text-decoration: no underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

  a:hover {
    @apply text-brand-link-hover;
  }
  pre {
    @apply bg-code-pre-bg text-code-pre-text p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

    code {
      @apply m-0 p-0 whitespace-pre border-none bg-transparent text-code-token;
      font-family: monospace;
      text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);

      .code-details-summary-span {
        @apply -ml-[15px] cursor-pointer;

        &::after {
          content: "›";
          @apply float-left relative -left-0.5 text-center text-code-link text-base;
        }
      }

      a {
        border-bottom: 1px dotted;
        @apply border-b-code-anchor-border;
      }

      .code-link {
        @apply relative;

        &:hover {
          @apply text-code-link-hover;
        }
      }
    }

    code,
    tt {
      @apply bg-transparent border-none;
    }
  }

  p {
    code,
    tt {
      @apply max-w-full overflow-auto;
      line-height: initial;
      margin: 0;
    }
  }

  span {
    code,
    tt {
      @apply whitespace-pre-line;
    }
  }

  h2 {
    @apply mt-[2em];
  }
  h2:first-child {
    @apply mt-[1em];
  }
  h2 + h3 {
    @apply mt-[0.5em];
  }
  h3 {
    @apply mt-[1.5em];
  }
}

.dark .markdown h1,
.dark .markdown h2,
.dark .markdown h3,
.dark .markdown h4,
.dark .markdown h5,
.dark .markdown h6 {
  @apply text-dark-heading;
}

.dark .markdown code,
.dark .markdown tt {
  text-shadow: none;
  @apply bg-dark-code-inline-bg;
}

.dark .markdown blockquote {
  @apply border-l-dark-section-border text-dark-muted;
}

.dark .markdown blockquote.tip {
  @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
}

.dark .markdown blockquote.warning {
  @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
}

.dark .markdown blockquote.todo {
  @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
}

.dark .markdown hr {
  @apply bg-dark-section-border;
}

.dark .markdown th {
  @apply bg-dark-bg border-dark-border;
}

.dark .markdown tr,
.dark .markdown tr:last-child {
  @apply border-dark-border;
}

.dark .markdown tr:nth-child(2n) {
  @apply bg-dark-surface;
}

.dark .markdown td {
  @apply border-dark-border;
}

.dark .markdown pre {
  @apply bg-dark-code-bg;
}

.dark .markdown pre code {
  @apply bg-transparent;
}

.dark .markdown a {
  @apply text-dark-link;
}

.dark .markdown a:hover {
  @apply text-dark-link-hover;
}

.dark .markdown aside.tip,
.dark .markdown aside.warning,
.dark .markdown aside.preview,
.dark .markdown aside.todo {
  @apply bg-dark-surface-2 text-white;
}

.dark .markdown aside.tip > .tip__prefix,
.dark .markdown aside.warning > .warning__prefix,
.dark .markdown aside.preview > .preview__prefix,
.dark .markdown aside.todo > .todo__prefix {
  @apply text-white;
}