/*
AlertDialog

Dialog's overlay and panel (dialog/style.css) with the alert layout:

<dialog class="dialog-overlay alert-dialog-overlay" role="alertdialog">
  <div class="dialog alert-dialog" data-size="md|sm">
    .alert-dialog-header
      .alert-dialog-media          optional icon or image, spans both rows
      .dialog-title.alert-dialog-title
      .dialog-description.alert-dialog-description
    ...content...
    .alert-dialog-footer           Cancel and Action

md: header left-aligned from 40rem up, centered below; footer right-aligned,
stacked full width below 40rem (the two queries never overlap). sm: always centered, actions in two equal
columns.
*/

@layer components {

.alert-dialog-media-part {
  display: contents;
}

.dialog.alert-dialog[data-size="sm"] {
  max-width: var(--container-xs);
}

.alert-dialog-header {
  display:            grid;
  grid-template-rows: auto 1fr;
  justify-items:      center;
  grid-template-columns: minmax(0, 1fr);
  gap:                var(--space-1-5);
  text-align:         center;
}

/* A filename or URL with no break points wraps instead of widening the panel. */
.alert-dialog-header > * {
  min-width:     0;
  max-width:     100%;
  overflow-wrap: anywhere;
}

.alert-dialog-header:has(.alert-dialog-media) {
  grid-template-rows: auto auto 1fr;
}

.alert-dialog-media {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--control-height-lg);
  height:          var(--control-height-lg);
  margin-bottom:   var(--space-2);
  border-radius:   var(--radius-control);
  /* A muted tile one step toward the ink from the panel. --bg-muted is the
     panel's own color in some looks (the default dark: both neutral-800), so
     the tile is mixed from --dialog-bg and always shows against it. */
  background:      color-mix(in oklab, var(--ink) 7%, var(--dialog-bg));
  color:           var(--ink);
}

.alert-dialog-media svg {
  width:  var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.alert-dialog-media.is-danger {
  background: var(--danger-soft);
  color:      var(--danger);
}

.alert-dialog-media img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: inherit;
}

.alert-dialog-footer {
  display:         flex;
  flex-direction:  row;
  justify-content: flex-end;
  gap:             var(--space-2);
}

.dialog.alert-dialog[data-size="sm"] .alert-dialog-footer {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.dialog.alert-dialog[data-size="sm"] .alert-dialog-footer > .button {
  width: 100%;
}

/* md from 40rem up: media on the left spanning the title and description. */
@media (min-width: 40rem) {
  .dialog.alert-dialog[data-size="md"] .alert-dialog-header {
    justify-items: start;
    text-align:    start;
  }

  .dialog.alert-dialog[data-size="md"] .alert-dialog-header:has(.alert-dialog-media) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows:    auto 1fr;
    column-gap:            var(--space-6);
  }

  .dialog.alert-dialog[data-size="md"] .alert-dialog-header:has(.alert-dialog-media) > .alert-dialog-media-part > .alert-dialog-media,
  .dialog.alert-dialog[data-size="md"] .alert-dialog-header > .alert-dialog-media {
    grid-row:      1 / span 2;
    margin-bottom: 0;
  }

  .dialog.alert-dialog[data-size="md"] .alert-dialog-header:has(.alert-dialog-media) > .alert-dialog-title {
    grid-column: 2;
  }

  .dialog.alert-dialog[data-size="md"] .alert-dialog-header:has(.alert-dialog-media) > .alert-dialog-description {
    grid-column: 2;
  }
}

@media (width < 40rem) {
  .dialog.alert-dialog[data-size="md"] .alert-dialog-footer {
    flex-direction: column-reverse;
  }

  .dialog.alert-dialog[data-size="md"] .alert-dialog-footer > .button {
    width: 100%;
  }
}

}