/* This is placed in a dedicated file so it can be excluded from other
typography elements that are rendered in the CKEditor context; otherwise, this
styling would affect the rendering of the vertical tabs in the Drupal editing
interface */

/* Excluding error-with-backtrace avoids this styling affecting Drupal error message display */
details:not(.error-with-backtrace) {
    margin-bottom: 0.5rem;
    background: var(--ut-white);
    border: 1px solid var(--ut-limestone--t40);

  summary {
    padding: 0.375rem 0.75em;
    background: var(--ut-limestone--t40);
    color: var(--ut-burntorange--s20);
    font-size: 1.125rem;
    font-weight: 600;
    list-style: revert-layer;
  }
  &[open] {
    padding: 0 1rem 0.5rem;
    border: 1px solid var(--ut-burntorange--s20);
  }
  &[open] summary,
  summary:hover {
    background: var(--ut-burntorange--s20);
    text-decoration: none;
    color: var(--ut-white);
  }
  &[open] summary {
    margin: 0 -1rem 0.75rem;
  }
}