<dialog open class="webOnly">
  <form method="dialog">
    <button class="dialog__close button -ghost -circle webOnly">
      <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: 0.75rem;
    top: 0.75rem;
  }
}