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

.resizable-demo {
  width:         100%;
  max-width:     36rem;
  height:        16rem;
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.resizable-demo.is-tall {
  height: 20rem;
}

.resizable-demo-pane {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding:         var(--space-4);
  font-weight:     var(--weight-strong);
  font-size:       var(--text-sm);
  text-align:      center;
}

.resizable-demo-side {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  height:         100%;
  padding:        var(--space-3);
  font-size:      var(--text-sm);
}

.resizable-demo-side[data-collapsed-view] {
  align-items: center;
}

.resizable-demo-log {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
}

.resizable-demo-col {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  gap:            var(--space-3);
  width:          100%;
  max-width:      36rem;
}

.resizable-demo-controls {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  align-items: center;
}

.resizable-demo.is-short {
  height: 8rem;
}

/* No separators: the second pane is tinted so the shared edge shows. */
.resizable-demo-pane.is-alt {
  background: var(--bg-muted);
}

/* Grid cells are narrower than panels at phone width: a tighter pane. */
.resizable-grid .resizable-demo-pane {
  padding: var(--space-2);
}