<dialog open>
  <form method="dialog">
    <button class="dialog__close button -ghost -circle">
      <svg class="button__icon"><use href="/main-icons-sprite.svg#close" /></svg>
    </button>
  </form>
  <h4>Dialog Title Area</h4>
  <p>
    Donec sit amet vestibulum turpis. Ut eget nibh pretium ipsum auctor pharetra. Curabitur maximus tristique pellentesque. Etiam pulvinar, tortor sed finibus scelerisque, neque libero vehicula neque, ut molestie mauris risus ac dui. Quisque vel imperdiet leo.
  </p>
</dialog>

.dialog,
dialog {
  border-radius: 1rem;
  border: 0;
  box-shadow: var(--root-box-shadow-med);
  color: var(--root-color);
  padding: 1.5rem 2rem;
  max-width: 36rem;
  inset: 0;

  &__close {
    position: absolute;
    right: .75rem;
    top: .75rem;
  }
}