@layer components {
  ::highlight(we-code-comment) {
    color: var(--syntax-comment);
  }

  ::highlight(we-code-keyword) {
    color: var(--color-charcoal);
  }

  ::highlight(we-code-number) {
    color: var(--syntax-number);
  }

  ::highlight(we-code-string) {
    color: var(--syntax-string);
  }

  ::highlight(we-code-function) {
    color: var(--syntax-title);
  }

  ::highlight(we-code-tag) {
    color: var(--syntax-tag);
  }

  ::highlight(we-code-property) {
    color: var(--syntax-number);
  }

  ::highlight(we-code-operator) {
    color: var(--color-muted);
  }

  ::highlight(we-code-deleted) {
    color: var(--syntax-title);
    background-color: var(--syntax-deletion);
  }

  ::highlight(we-code-inserted) {
    color: var(--color-green-deep);
    background-color: var(--syntax-addition);
  }

  .spoiler {
    border-radius: var(--radius-inline);
    background: var(--color-line-soft);
    color: transparent;
    text-shadow: none;
    cursor: help;

    &:is(:hover, :focus) {
      color: inherit;
    }

    @media print {
      color: inherit;
    }
  }

  .cms-page {
    inline-size: 100%;
    max-inline-size: 54rem;
    margin: var(--space-32) auto;
    padding-inline: var(--page-gutter);
    font: var(--text-body) / var(--leading-body) var(--font-text);

    & :is(img, video, iframe, audio) {
      max-inline-size: 100%;
    }

    & img {
      block-size: auto;
    }
  }

  :is(.cms-page, .post) {
    & table {
      border-collapse: collapse;
    }

    & :is(td, th) {
      padding: var(--space-8);
      border: 1px solid var(--color-line);
    }
  }
}