@layer components {
  .lexxy-content {
    line-height: 1.75;
    color: var(--color-ink);
    max-inline-size: 65ch;

    & > * + * {
      margin-block-start: 1.25em;
    }

    & p {
      margin-block-start: 1.25em;
      margin-block-end: 1.25em;
    }

    & h1 {
      font-size: 2.25em;
      font-weight: 800;
      margin-block-start: 0;
      margin-block-end: 0.8888889em;
      line-height: 1.1111111;
    }

    & h2 {
      font-size: 1.5em;
      font-weight: 700;
      margin-block-start: 1.5em;
      margin-block-end: 0.5em;
      line-height: 1.3333333;
    }

    & h3 {
      font-size: 1.25em;
      font-weight: 600;
      margin-block-start: 1.5em;
      margin-block-end: 0.5em;
      line-height: 1.6;
    }

    & h4 {
      font-weight: 600;
      margin-block-start: 1.5em;
      margin-block-end: 0.5em;
      line-height: 1.5;
    }

    & a {
      color: var(--color-link);
      text-decoration: underline;

      &:hover {
        color: var(--color-link-hover);
      }
    }

    & strong {
      font-weight: 600;
    }

    & ol {
      list-style-type: decimal;
      margin-block-start: 1.25em;
      margin-block-end: 1.25em;
      padding-inline-start: 1.625em;
    }

    & ul {
      list-style-type: disc;
      margin-block-start: 1.25em;
      margin-block-end: 1.25em;
      padding-inline-start: 1.625em;
    }

    & li {
      margin-block-start: 0.5em;
      margin-block-end: 0.5em;
    }

    & blockquote {
      font-style: italic;
      border-inline-start: 0.25rem solid var(--color-border);
      padding-inline-start: 1em;
      margin-block-start: 1.6em;
      margin-block-end: 1.6em;
    }

    & pre {
      overflow-x: auto;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-block-start: 1.7142857em;
      margin-block-end: 1.7142857em;
      border-radius: 0.125rem;
      padding: 0.8571429em 1.1428571em;
      box-shadow: var(--shadow);
      color: oklch(44.6% 0.016 285.75);
    }

    & code {
      font-size: 0.875em;
      background-color: oklch(14.49% 0.004 285.82);
      color: oklch(93.14% 0.044 260.16);
      border-radius: 0.125rem;
      padding: 0.125rem var(--space-1);

      &::before, &::after {
        content: none;
      }
    }

    & pre code {
      background-color: transparent;
      color: inherit;
      padding: 0;
    }

    & img {
      border-radius: 0.125rem;
      box-shadow: var(--shadow);
      max-block-size: 70vh;
    }

    & video {
      border-radius: 0.125rem;
      box-shadow: var(--shadow);
      margin-block: 0;
      max-block-size: 70vh;
    }

    & figure {
      margin-block-start: 2em;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    & figcaption {
      font-size: 0.875em;
      color: var(--color-ink-subtle);
      margin-block-start: 0.8571429em;
    }

    & hr {
      border-block-start: 1px solid var(--color-border);
      margin-block-start: 3em;
      margin-block-end: 3em;
    }
  }

  /* Attachments */
  .lexxy-content .attachment {
    display: flex;
  }

  .lexxy-content .attachment-gallery > action-text-attachment,
  .lexxy-content .attachment-gallery > .attachment {
    display: flex;
    flex-grow: 1;
    flex-basis: 33.333%;
    max-inline-size: 33.333%;
    padding-block: var(--space-2);
    justify-content: center;
    align-items: center;
  }

  .lexxy-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .lexxy-content .attachment-gallery.attachment-gallery--2 > .attachment,
  .lexxy-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .lexxy-content .attachment-gallery.attachment-gallery--4 > .attachment {
    flex-basis: 50%;
    max-inline-size: 50%;
  }

  .lexxy-content .attachment.attachment--file.attachment--mp4 {
    border: 0;
  }

  .attachment__caption.attachment__caption--editing {
    inline-size: 100%;
  }

  /* Tables */
  .lexxy-content table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .lexxy-content th {
    text-align: start;
    font-weight: 600;
    padding-block-end: var(--space-2);
    border-block-end: 1px solid var(--color-border);
  }

  .lexxy-content td {
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--color-border-subtle);
  }

  .lexxy-content tr:last-child td {
    border-block-end: 0;
  }

  /* Code blocks (lexxy uses pre[data-language]) */
  .lexxy-content pre[data-language],
  .lexxy-content code[data-language] {
    display: block;
    overflow-x: auto;
    padding: 1rem;
    border-radius: 0.125rem;
    box-shadow: var(--shadow);
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: oklch(0% 0 0 / 0.2) transparent;
  }

  /* Dark mode */
  .color-scheme.color-scheme--dark .lexxy-content {
    & pre {
      color: oklch(87.81% 0.01 258.34);
    }

    & th {
      border-color: oklch(44.6% 0.016 285.75);
    }

    & td {
      border-color: oklch(37.14% 0.014 285.75);
    }

    & .lexxy-content__table-cell--header {
      background-color: rgb(38, 38, 38) !important;
    }
  }

  .color-scheme.color-scheme--dark .lexxy-content pre[data-language],
  .color-scheme.color-scheme--dark .lexxy-content code[data-language] {
    scrollbar-color: oklch(100% 0 0 / 0.2) transparent;
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .lexxy-content {
      & pre {
        color: oklch(87.81% 0.01 258.34);
      }

      & th {
        border-color: oklch(44.6% 0.016 285.75);
      }

      & td {
        border-color: oklch(37.14% 0.014 285.75);
      }

      & .lexxy-content__table-cell--header {
        background-color: rgb(38, 38, 38) !important;
      }
    }

    .color-scheme:not(.color-scheme--light) .lexxy-content pre[data-language],
    .color-scheme:not(.color-scheme--light) .lexxy-content code[data-language] {
      scrollbar-color: oklch(100% 0 0 / 0.2) transparent;
    }
  }

  /* Lexxy dark mode variables */
  .color-scheme.color-scheme--dark lexxy-editor,
  .color-scheme.color-scheme--dark .lexxy-content {
    --lexxy-color-ink: oklch(90% 0 0);
    --lexxy-color-ink-medium: oklch(70% 0 0);
    --lexxy-color-ink-light: oklch(50% 0 0);
    --lexxy-color-ink-lighter: oklch(30% 0 0);
    --lexxy-color-ink-lightest: oklch(15% 0 0);
    --lexxy-color-ink-inverted: oklch(10% 0 0);
    --lexxy-color-canvas: oklch(10% 0 0);
    --lexxy-color-text: oklch(90% 0 0);
    --lexxy-color-text-subtle: oklch(60% 0 0);
    --lexxy-color-accent-light: oklch(35% 0.08 254);
    --lexxy-color-accent-lightest: oklch(28% 0.06 254);
    --lexxy-color-selected: oklch(25% 0.04 254);
    --lexxy-color-selected-hover: oklch(30% 0.06 254);
    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.color-scheme--light) lexxy-editor,
    :root:not(.color-scheme--light) .lexxy-content {
      --lexxy-color-ink: oklch(90% 0 0);
      --lexxy-color-ink-medium: oklch(70% 0 0);
      --lexxy-color-ink-light: oklch(50% 0 0);
      --lexxy-color-ink-lighter: oklch(30% 0 0);
      --lexxy-color-ink-lightest: oklch(15% 0 0);
      --lexxy-color-ink-inverted: oklch(10% 0 0);
      --lexxy-color-canvas: oklch(10% 0 0);
      --lexxy-color-text: oklch(90% 0 0);
      --lexxy-color-text-subtle: oklch(60% 0 0);
      --lexxy-color-accent-light: oklch(35% 0.08 254);
      --lexxy-color-accent-lightest: oklch(28% 0.06 254);
      --lexxy-color-selected: oklch(25% 0.04 254);
      --lexxy-color-selected-hover: oklch(30% 0.06 254);
      --lexxy-color-code-token-att: #ff7b72;
      --lexxy-color-code-token-comment: #8b949e;
      --lexxy-color-code-token-function: #d2a8ff;
      --lexxy-color-code-token-operator: #ff7b72;
      --lexxy-color-code-token-property: #79c0ff;
      --lexxy-color-code-token-punctuation: #c9d1d9;
      --lexxy-color-code-token-selector: #7ee787;
      --lexxy-color-code-token-variable: #ffa657;
    }
  }
}