.markdown {
  position: relative;
  word-break: break-word;

  & > pre {
    @apply overflow-hidden;
  }

  & :where(h1) {
    @apply font-bold typo-title2 mt-10 mb-7;
  }
  & :where(h2) {
    @apply font-bold typo-title3 mt-8 mb-6;
  }
  & :where(h3) {
    @apply font-bold typo-body mt-7 mb-5;
  }
  & :where(h4) {
    @apply typo-body font-bold mt-6 mb-4;
  }
  & :where(h5) {
    @apply text-text-tertiary font-bold typo-markdown mt-5 mb-4;
  }
  & :where(h6) {
    @apply text-text-tertiary font-bold mt-4 mb-3;
  }
  & :where(p) {
    @apply typo-markdown my-5 relative;
  }
  & :where(blockquote) {
    @apply typo-markdown italic pl-7 my-5 border-l border-border-subtlest-secondary;
  }
  & :where(pre) {
    @apply typo-markdown relative bg-surface-float my-5 rounded-12;
  }

  & :where(pre) > code {
    @apply whitespace-pre-wrap;
    color: var(--theme-highlight-label);
  }
  & :not(pre) > code {
    @apply bg-surface-float typo-footnote px-1 rounded-6 box-decoration-clone;
  }
  & :where(ul) {
    @apply list-disc my-5 pl-7;
  }
  & :where(ol) {
    @apply list-decimal my-5 pl-7;
  }
  & :where(li) {
    @apply typo-markdown my-2 pl-2;
  }
  & ::marker {
    @apply text-text-secondary;
  }
  & :where(ul ul, ul ol, ol ul, ol ol) {
    @apply typo-markdown my-2;
  }
  & :where(ol p) {
    @apply my-0;
  }
  & :where(a) {
    @apply typo-markdown text-text-link hover:underline;
  }
  & :where(a[data-mention-username]) {
    @apply relative text-text-primary hover:underline bg-text-highlight-default font-bold px-1 rounded-6;

    &:hover {
      @apply bg-text-highlight-hover;
    }
  }
  & :where(hr) {
    @apply border-border-subtlest-secondary my-10;
  }
  & :where(img) {
    @apply rounded-16 max-h-img-mobile tablet:max-h-img-desktop;
  }
  & > :where(:first-child) {
    @apply mt-0;
  }
  & > :where(:last-child) {
    @apply mb-0;
  }
  & :where(pre) :global(:where(.hljs-comment, .hljs-title)) {
    color: var(--theme-highlight-comment);
  }
  &
    :where(pre)
    :global(:where(.hljs-variable, .hljs-attribute, .hljs-tag, .hljs-regexp, .ruby
        .hljs-constant, .xml .hljs-tag .hljs-title, .xml .hljs-pi, .xml
        .hljs-doctype, .html .hljs-doctype, .css .hljs-id, .css
        .hljs-class, .css .hljs-pseudo)) {
    color: var(--theme-highlight-red);
  }
  &
    :where(pre)
    :global(:where(.hljs-number, .hljs-preprocessor, .hljs-built_in, .hljs-literal, .hljs-params, .hljs-constant)) {
    color: var(--theme-highlight-orange);
  }
  &
    :where(pre)
    :global(:where(.ruby .hljs-class .hljs-title, .css
        .hljs-rules
        .hljs-attribute)) {
    color: var(--theme-highlight-yellow);
  }
  &
    :where(pre)
    :global(:where(.hljs-string, .hljs-value, .hljs-inheritance, .hljs-header, .ruby
        .hljs-symbol, .xml .hljs-cdata)) {
    color: var(--theme-highlight-green);
  }
  & :where(pre) :global(:where(.css .hljs-hexcolor)) {
    color: var(--theme-highlight-aqua);
  }
  &
    :where(pre)
    :global(:where(.hljs-function, .python .hljs-decorator, .python
        .hljs-title, .ruby .hljs-function .hljs-title, .ruby
        .hljs-title
        .hljs-keyword, .perl .hljs-sub, .javascript .hljs-title, .coffeescript
        .hljs-title)) {
    color: var(--theme-highlight-blue);
  }

  & :where(pre) :global(:where(.hljs-keyword, .javascript .hljs-function)) {
    color: var(--theme-highlight-purple);
  }
  & :where(pre) :global(:where(.hljs)) {
    display: block;
    color: var(--theme-highlight-label);
    padding: 0.5em;
    font-size: 16px;
    line-height: 1.375;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
  }
  &
    :where(pre)
    :global(:where(.coffeescript .javascript, .javascript .xml, .tex
        .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml
        .hljs-cdata)) {
    opacity: 0.5;
  }


}
