/* The Dialog (components/dialog.js). A core sheet: every tier. The
   window surface draws the frame (components/surface.css: its ground,
   its corner by the law, its inset); this sheet lays out the head and
   the body. The head is one row of the control's height: the title in
   the system's type at the label weight, 500, and the close at the
   row's end, a square icon button of the ladder (components/button.css
   draws its rungs; the glyph at the slot's preset). The body stands the
   Window space under the head (the window's own "between groups"), and
   holds what the caller assembled, as wide as it is. */
.ds-dialog {
  display: grid;
  row-gap: var(--group-gap, var(--ds-space-16));
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  color: var(--ds-color-text);
  font-family: var(--ds-type-family);
  font-size: var(--type, var(--ds-text-16));
  line-height: var(--line, calc(var(--ds-grid-cell) * 6));
  font-weight: var(--ds-type-weight);
}
/* put away by its host (the frame hides nothing itself): its grid
   would outrank the attribute's own display */
.ds-dialog[hidden] {
  display: none;
}
.ds-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-8);
  min-height: var(--control, calc(var(--ds-grid-cell) * 8));
}
.ds-dialog__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ds-dialog__close {
  flex: none;
  width: var(--control, calc(var(--ds-grid-cell) * 8));
  min-width: 0;
  padding: 0;
}
/* its glyph at the slot's preset, as every icon in a slot (iteration
   24: components/surface.css --icon; it stood at 16 in a compact 24 and
   at any Type size) */
.ds-dialog__close .ds-icon {
  width: var(--icon);
  height: var(--icon);
}
.ds-dialog__body {
  display: grid;
  min-width: 0;
}
/* a compact head (data-head="compact"): the compact row (24), the
   title in a compact surface's type (the Type size less 2 on its line,
   components/surface.css, so a Type edit reaches it: iteration 24's
   audit, it stood at 14 on 20 whatever the size), the close the compact
   square, the body the stack's gap under it; the window's inset round
   it as round the body */
.ds-dialog[data-head="compact"] {
  row-gap: var(--stack-gap, var(--ds-space-8));
}
.ds-dialog[data-head="compact"] .ds-dialog__head {
  --control: calc(var(--ds-grid-cell) * 6);
  --type: calc(var(--ds-type-size) - 2px);
  --line: round(
    nearest,
    calc((var(--ds-type-size) - 2px) * var(--ds-type-line)),
    var(--ds-grid-cell)
  );
  min-height: var(--control);
}
@supports not (width: round(down, 1px, 1px)) {
  .ds-dialog[data-head="compact"] .ds-dialog__head {
    --line: calc(var(--ds-grid-cell) * 5);
  }
}
.ds-dialog[data-head="compact"] .ds-dialog__title {
  font-size: var(--type);
  line-height: var(--line);
}