@layer pages {
  .utm {
    & details {
      margin-block: var(--space-8);
    }

    & summary {
      margin-block-end: var(--space-8);
      font-size: var(--text-small);
      line-height: var(--leading-small);
      cursor: pointer;
    }

    & .link {
      font-size: var(--text-code);
      line-height: var(--leading-code);

      & code {
        overflow-wrap: anywhere;
      }
    }

    & .example {
      padding-block: var(--space-20);
      font-size: var(--text-small);
      line-height: var(--leading-small);
    }

    & .example code {
      white-space: normal;
    }
  }

  ::highlight(we-utm-name) {
    color: var(--color-muted);
  }

  ::highlight(we-utm-value) {
    background-color: var(--color-cyan-soft);
    color: var(--color-ink);
  }
}