@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

/* Demo logs are .demo-log (catalog/style.css); here they are centered. */
.drawer-demo-log {
  text-align: center;
}

.drawer-demo-sides {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--space-2);
}

.drawer-demo-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
  max-width:      var(--container-sm);
  margin-inline:  auto;
}

.drawer-demo-goal {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-6);
}

.drawer-demo-goal-value {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      var(--space-24);
}

.drawer-demo-goal-number {
  font-family:          var(--font-heading);
  font-size:            var(--text-h1);
  font-weight:          var(--weight-heading);
  font-variant-numeric: tabular-nums;
  line-height:          1;
}

.drawer-demo-goal-unit {
  font-size:      var(--text-caption);
  color:          var(--ink-dim);
  text-transform: uppercase;
}

.drawer-demo-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin:         0;
  padding:        0;
  list-style:     none;
}

.drawer-demo-list li {
  padding:       var(--space-3);
  border-radius: var(--radius-item);
  /* One step toward the ink from the panel: --bg-muted is the panel's own
     color in the default dark look. */
  background:    color-mix(in oklab, var(--ink) 7%, var(--dialog-bg));
}

.drawer-demo-prose {
  margin: 0;
  color:  var(--ink-soft);
}

/* Logs sit on their own line, so a log growing never moves the trigger. */
.drawer-demo-logs {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  flex-basis:     100%;
  min-width:      0;
  gap:            var(--space-1);
}

/* The inset demo: the panel floats off the edges (shadcn --drawer-inset). */
.dialog.drawer.drawer-demo-inset {
  --drawer-inset: var(--space-4);
}

/* A clear backdrop at the lowest snap point, as in vaul: the floor
   (shadcn --drawer-overlay-min-opacity) is 0.5 with snap points otherwise. */
.dialog.drawer.drawer-demo-clear {
  --drawer-overlay-min-opacity: 0;
}

.drawer-demo-query {
  width: auto;
}

/* The dynamic demo (vaul's Dynamic Drawer): the views box tweens its height
   to its content's, measured by followHeight() in page.ehtml, and each view
   fades in. Clipped with a margin so focus rings still show. */
.drawer-demo-views {
  overflow:             clip;
  overflow-clip-margin: var(--space-1);
  transition:           height var(--duration-enter) var(--ease-enter);
}

.drawer-demo-views:not([data-measured]) {
  transition: none;
}

.drawer-demo-view {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  animation:      drawer-demo-view-in var(--duration-enter) var(--ease-enter);
}

@keyframes drawer-demo-view-in {
  from { opacity: 0; transform: scale(var(--enter-scale)); }
}

.drawer-demo-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.drawer-demo-options .button {
  justify-content: flex-start;
  width:           100%;
}

.drawer-demo-points {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin:         0;
  padding-left:   var(--space-5);
  color:          var(--ink-soft);
}