@layer components {
  .rs-markdown {
    color: var(--rs-color-foreground-neutral);
    font-size: var(--rs-font-size-body-2);
    line-height: var(--rs-line-height-body-2);
  }

  .rs-markdown > :first-child {
    margin-block-start: 0;
  }

  .rs-markdown > :last-child {
    margin-block-end: 0;
  }

  .rs-markdown :is(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--rs-unit-x6) var(--rs-unit-x3);
    font-family: var(--rs-font-family-title);
    font-weight: var(--rs-font-weight-bold);
    letter-spacing: 0;
    color: var(--rs-color-foreground-neutral);
  }

  .rs-markdown h1 {
    font-size: var(--rs-font-size-title-6);
    line-height: var(--rs-line-height-title-6);
  }

  .rs-markdown h2 {
    font-size: var(--rs-font-size-featured-2);
    line-height: var(--rs-line-height-featured-2);
  }

  .rs-markdown h3 {
    font-size: var(--rs-font-size-featured-3);
    line-height: var(--rs-line-height-featured-3);
  }

  .rs-markdown :is(h4, h5, h6) {
    font-size: var(--rs-font-size-body-2);
    line-height: var(--rs-line-height-body-2);
  }

  .rs-markdown :is(p, ul, ol, blockquote, pre, table, figure) {
    margin-block: var(--rs-unit-x3);
  }

  .rs-markdown :is(ul, ol) {
    padding-inline-start: var(--rs-unit-x5);
  }

  .rs-markdown li {
    margin-block: var(--rs-unit-x1);
    padding-inline-start: var(--rs-unit-x1);
  }

  .rs-markdown li > :is(p, ul, ol) {
    margin-block: var(--rs-unit-x2);
  }

  .rs-markdown a {
    color: var(--rs-color-foreground-primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: calc(var(--rs-unit-x1) / 2);
    transition:
      color var(--rs-duration-fast) var(--rs-easing-standard),
      opacity var(--rs-duration-fast) var(--rs-easing-standard),
      text-decoration-color var(--rs-duration-fast) var(--rs-easing-standard);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-markdown a:hover {
      opacity: 0.8;
      text-decoration-color: transparent;
    }
  }

  .rs-markdown a:focus-visible {
    outline: 2px solid var(--rs-color-border-primary);
    outline-offset: 2px;
    border-radius: var(--rs-radius-small);
  }

  .rs-markdown blockquote {
    border-inline-start: 3px solid var(--rs-color-border-primary);
    padding: var(--rs-unit-x1) 0 var(--rs-unit-x1) var(--rs-unit-x4);
    color: var(--rs-color-foreground-neutral-faded);
  }

  .rs-markdown code {
    border-radius: var(--rs-radius-small);
    padding: 0 var(--rs-unit-x1);
    background: var(--rs-color-background-neutral-faded);
    color: var(--rs-color-foreground-neutral);
    font-family: var(--rs-font-family-monospace);
    font-size: 0.92em;
  }

  .rs-markdown pre {
    --rs-scroll-fade-end: 1;
    overflow: auto;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    padding: var(--rs-unit-x4);
    background: var(--rs-color-background-page-faded);
    mask-image:
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        white,
        transparent calc(var(--rs-scroll-fade-start, 0) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end, 0) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  .rs-markdown pre code {
    display: block;
    padding: 0;
    background: transparent;
    font-size: var(--rs-font-size-body-3);
    line-height: var(--rs-line-height-body-3);
  }

  .rs-markdown table {
    --rs-scroll-fade-end: 1;
    display: block;
    inline-size: 100%;
    overflow: auto;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    border-spacing: 0;
    background: var(--rs-color-background-elevation-base);
    border-collapse: separate;
    mask-image:
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        white,
        transparent calc(var(--rs-scroll-fade-start, 0) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end, 0) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  @supports (animation-timeline: scroll()) {
    .rs-markdown :is(pre, table) {
      animation-name: rs-scroll-fade-start, rs-scroll-fade-end;
      animation-timing-function: linear, linear;
      animation-timeline: scroll(self x);
      animation-range:
        0 var(--rs-scroll-fade-range),
        calc(100% - var(--rs-scroll-fade-range)) 100%;
      animation-fill-mode: both;
    }
  }

  .rs-markdown :is(th, td) {
    padding: var(--rs-unit-x3) var(--rs-unit-x4);
    border-block-start: 1px solid var(--rs-color-border-neutral-faded);
    text-align: start;
    vertical-align: top;
  }

  .rs-markdown thead :is(th, td) {
    border-block-start: 0;
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-font-size-caption-1);
    font-weight: var(--rs-font-weight-semibold);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-markdown tbody tr:first-child :is(th, td) {
    border-block-start: 1px solid var(--rs-color-border-neutral-faded);
  }

  .rs-markdown hr {
    block-size: 1px;
    border: 0;
    margin-block: var(--rs-unit-x6);
    background: var(--rs-color-border-neutral-faded);
  }

  .rs-markdown img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--rs-radius-medium);
  }
}