@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-scroll {
      max-inline-size: 100%;
      margin-block: var(--space-32);
      overflow: auto;
      overflow-wrap: normal;
      border: 1px solid var(--color-line-soft);
      border-radius: var(--radius-card);
      background-color: var(--color-paper);
      box-shadow: var(--shadow-flat);
    }

    & table {
      min-inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--text-ui);
      font-variant-numeric: tabular-nums;
      line-height: var(--leading-ui);
    }

    & :is(td, th) {
      min-inline-size: 8rem;
      padding: var(--space-12) var(--space-16);
      border: 0;
      text-align: start;
      text-wrap: pretty;
      vertical-align: top;

      &:first-child {
        padding-inline-start: var(--space-20);
      }

      &:last-child {
        padding-inline-end: var(--space-20);
      }

      @media (max-width: 600px) {
        padding-inline: var(--space-8);

        &:first-child {
          padding-inline-start: var(--space-12);
        }

        &:last-child {
          padding-inline-end: var(--space-12);
        }
      }
    }

    & th {
      padding-block: var(--space-16) var(--space-12);
      border-block-end: 2px solid var(--color-line);
      color: var(--color-ink);
      font-family: var(--font-display);
      font-size: var(--text-ui);
      font-style: italic;
      font-weight: var(--weight-subheading);
      line-height: var(--leading-small);
    }

    & tbody tr + tr {
      border-block-start: 1px solid var(--color-line-soft);
    }

    & tbody tr:last-child td {
      padding-block-end: var(--space-16);
    }

    & :not(pre) > code {
      padding: 1px var(--space-4);
      border-radius: var(--radius-inline);
      background-color: color-mix(in oklch, var(--color-line-soft) 70%, transparent);
    }

    & a > code {
      padding: 0;
      background-color: transparent;
    }
  }

  pre:has(> :is(.code-lines, .code-copy)) {
    position: relative;
    overflow: visible;

    & > code {
      overflow-x: auto;
    }
  }

  .code-copy {
    position: absolute;
    inset-block-end: calc(100% + var(--space-4));
    inset-inline-end: 0;
    user-select: none;

    @media (hover: hover) {
      pre:not(:hover, :focus-within) > & {
        opacity: 0;
      }
    }
  }

  .code-lines {
    display: none;

    @media (width > 600px) {
      position: absolute;
      inset-block-start: var(--space-16);
      inset-inline-end: calc(100% + var(--space-12));
      display: flex;
      flex-direction: column;
      color: var(--color-line);
      font-variant-numeric: tabular-nums;
      line-height: var(--leading-code);
      text-align: end;
      white-space: nowrap;
      counter-reset: line;
      pointer-events: none;
      user-select: none;

      & > span::before {
        content: counter(line, decimal-leading-zero);
        counter-increment: line;
      }
    }
  }
}