@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-tools)) {
    position: relative;
    overflow: visible;

    & > code {
      overflow-x: auto;
    }

    &.wrapped > code {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    &.wrapped > .code-lines {
      display: none;
    }
  }

  pre:has(> .code-tools) {
    @media (hover: none) {
      padding-block-start: calc(var(--space-8) + 32px + var(--space-4));
    }
  }

  .code-tools {
    position: absolute;
    inset-block-start: var(--space-8);
    inset-inline-end: var(--space-8);
    display: flex;
    gap: var(--space-4);
    border-radius: var(--radius-control);
    user-select: none;

    @media (hover: hover) {
      background-color: color-mix(in oklch, var(--color-code) 92%, transparent);

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

      @media (prefers-reduced-motion: no-preference) {
        pre:is(:hover, :focus-within) > & {
          transition: opacity var(--transition-state);
        }
      }
    }
  }

  pre:not(.overflow, .wrapped) > .code-tools > .code-wrap {
    display: none;
  }

  .code-wrap {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5h12M2 8h9.5a2.25 2.25 0 0 1 0 4.5H8M2 12.5h3'/%3E%3Cpath d='m9.5 10.5-2 2 2 2'/%3E%3C/svg%3E");
  }

  .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;
      }
    }
  }
}