/*
 * drawers.css
 * Drawer = surface + off-canvas positioning. Built on native <dialog>
 * so focus trap, escape-to-close, and backdrop come for free.
 *
 * Usage:
 *   <dialog class="drawer from-right">
 *     <div class="surface-header">…</div>
 *     <div class="surface-body">…</div>
 *     <div class="surface-footer">…</div>
 *   </dialog>
 *
 * Open via element.showModal(); close via element.close().
 */

.drawer {
  /* Positioning — was the `drawer` Uno shortcut (fixed top-0 bottom-0
     right-0). For a modal <dialog> the UA stylesheet already supplies
     this; declaring it keeps .drawer working on a plain element too. */
  position: fixed;
  inset:    0;

  /* Same ground as a Dialog — it is the same tier and a theme separating
     the modal from the page means both. See dialogs.css for why this is
     --surface-ground rather than --surface-bg. */
  --surface-ground: var(--dialog-bg, var(--surface));

  /* Override dialog's centered margins */
  margin:        0;
  padding:       0;
  width:         320px;
  max-width:     90vw;
  height:        100vh;
  max-height:    100vh;
  border-radius: 0;
  box-shadow:    var(--shadow-lg);
}

/*
 * A column, so a .surface-body between a header and a footer takes the
 * remaining height rather than only as much as its content.
 *
 * Keyed off [open] rather than declared on .drawer, and that is not a
 * style: an author `display: flex` on a <dialog> beats the UA's
 * `display: none` and the drawer would be on screen shut. Only an open
 * <dialog> has the attribute, so a closed one keeps the UA's answer —
 * pinned by `overlay: a closed <dialog> stays closed` in components.spec.
 *
 * @frontierjs/ui carried this rule locally until the file that owns
 * .drawer had it.
 */
.drawer[open] {
  display:        flex;
  flex-direction: column;
}

.drawer::backdrop {
  background:      var(--scrim);
  backdrop-filter: blur(2px);
}

/* ── Edge variants ──────────────────────────────────────────────
 *
 * Each edge declares only where it comes from. overlays.css owns the
 * transition, so the same value carries the drawer back out again —
 * which is what the four @keyframes here could never do.
 */
.drawer.from-right {
  margin-left:   auto;
  --overlay-from: translateX(100%);
}
.drawer.from-left {
  margin-right:  auto;
  --overlay-from: translateX(-100%);
}
.drawer.from-top,
.drawer.from-bottom {
  width:      100%;
  max-width:  100%;
  height:     auto;
  max-height: 80vh;
}
.drawer.from-top {
  margin-bottom: auto;
  --overlay-from: translateY(-100%);
}
.drawer.from-bottom {
  margin-top:    auto;
  --overlay-from: translateY(100%);
}

/* A drawer with no edge stated slides from the right, the default the
   four keyframes used to imply by being listed first. */
.drawer {
  --overlay-from: translateX(100%);
}