@layer block {
  html:has(.details-modal[open]) {
    overflow: hidden;
  }

  .details-modal .details-icon {
    margin: 0;
    padding: 0;
    background: transparent url('../../icons/Info-black.svg') center/70% no-repeat;
    width: 2.6em;
    aspect-ratio: 1/1;
  }

  dialog.details-modal {
    width: var(--dialog-width);
    padding: var(--gutter-m);
    border-radius: var(--dialog-border-radius);
    border: 0;
    text-wrap: pretty;
    text-align: left;
    font-size: var(--dialog-text-size);
    font-weight: var(--fw-normal);
  }

  dialog.details-modal::backdrop {
    backdrop-filter: var(--backdrop-blur);
    background: var(--backdrop-color);
  }

  dialog.details-modal :is(h1, h2, h3, h4, h5, h6, strong) {
    display: block;
    margin-block-end: 0.5em;
    text-transform: none;
    font-size: var(--dialog-heading-size);

    @media (width <= 480px), (max-width: 480px) {
      padding-inline-end: 2rem;
    }
  }

  dialog.details-modal strong ~ br {
    display: none;
  }

  .details-modal.details-icon-white .details-icon {
    background: transparent url('../../icons/Info-white.svg') center/70%
      no-repeat;
  }

  ol:has(.details-icon) {
    margin: 0;
    padding: 0;
  }

  .details-modal ol {
    display: none;
  }
}