/*
The "More Details" and "Raw Responses" disclosure.

A `<details>` triangle is painted by the browser (and each one paints its own), so
it is another surface we had not drawn. It was solved twice, in Apps and in DNS
Client, and both times with the chevron hand-encoded as an SVG in a `data:` URI:
the same path as `chevronRight` from `ui/Icon`, but with `stroke-width: 2.5`
against the 1.75 of the whole set. In other words, the only icon in the console
with a different stroke weight, and in duplicate. Now it is the real icon.
*/

.details > summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  /* The target gets clicked: with no padding it measured 17 px tall in Apps, and
     in DNS Client it did carry it. The same old difference. */
  padding: var(--s-3) 0;
  font-size: var(--t-3);
  color: var(--acc-ink);
  cursor: pointer;
  list-style: none;
}

.details > summary::-webkit-details-marker { display: none; }

.chevron {
  flex: none;
  transition: transform var(--t-fast);
}

.details[open] > summary .chevron { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .chevron { transition: none; }
}