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

.vl-demo {
  width:      100%;
  height:     20rem;
  border:     var(--surface-border-width) solid var(--surface-border);
  background: var(--surface-bg);
}

.vl-demo.is-short { height: 14rem; }

.vl-row {
  display:       flex;
  align-items:   center;
  gap:           var(--item-gap);
  height:        100%;
  min-height:    var(--item-height);
  padding:       0 var(--item-padding-x);
  border-bottom: var(--surface-border-width) solid var(--rule-soft, var(--rule));
  white-space:   nowrap;
  overflow:      hidden;
}

.vl-row-index {
  min-width:            4ch;
  color:                var(--ink-dim);
  font-family:          var(--font-mono);
  font-size:            var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.vl-row-sub {
  overflow:      hidden;
  text-overflow: ellipsis;
  color:     var(--ink-soft);
  font-size: var(--text-caption);
}

.vl-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  padding:        var(--space-3) var(--item-padding-x);
  border-bottom:  var(--surface-border-width) solid var(--rule-soft, var(--rule));
}

.vl-card-name { font-weight: var(--weight-strong); }

.vl-card-note {
  color:       var(--ink-soft);
  line-height: var(--leading-snug);
}

.vl-column {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  border-inline-end: var(--surface-border-width) solid var(--rule-soft, var(--rule));
  color:           var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.vl-tile-pad { padding: var(--space-1); }

.vl-tile {
  display:         flex;
  align-items:     flex-end;
  padding:         var(--space-2);
  border-radius:   var(--radius-item);
  background:      var(--bg-muted);
  color:           var(--ink-soft);
  font-size:       var(--text-caption);
}

.vl-header {
  padding:       var(--space-1) var(--item-padding-x);
  border-bottom: var(--surface-border-width) solid var(--rule);
  background:    var(--bg-soft);
  color:         var(--ink-soft);
  font-weight:   var(--weight-strong);
  font-size:     var(--text-caption);
}

.vl-contact {
  display:     flex;
  align-items: center;
  height:      var(--item-height);
  padding:     0 var(--item-padding-x);
}

.vl-loading {
  display:     flex;
  align-items: center;
  height:      var(--item-height);
  padding:     0 var(--item-padding-x);
  color:       var(--ink-dim);
}

.vl-message {
  padding: var(--space-2) var(--item-padding-x);
}

.vl-message-bubble {
  display:       inline-block;
  max-width:     80%;
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-item);
  background:    var(--bg-muted);
  line-height:   var(--leading-snug);
}

.vl-toolbar {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
  width:       100%;
}

.vl-toolbar input {
  width: 8rem;
}

/* An echo line is a full-width block whose text wraps so it is read in
   full, and it reserves the lines its longest state needs (--log-lines, and
   --log-lines-narrow on a phone), so a changing value never changes the
   demo's height or moves the controls beside it. */
.vl-log {
  display:       block;
  flex:          0 0 100%;
  width:         100%;
  min-height:    calc(var(--log-lines, 1) * 1lh);
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  line-height:   var(--leading-snug);
  overflow-wrap: anywhere;
  color:         var(--ink-dim);
}

@media (max-width: 40rem) {
  .vl-log {
    min-height: calc(var(--log-lines-narrow, 1) * 1lh);
  }
}

.vl-window-demo {
  width:  100%;
  border: var(--surface-border-width) solid var(--surface-border);
}

.vl-sheet-row {
  border-bottom: var(--surface-border-width) solid var(--rule-soft, var(--rule));
}

.vl-sheet-cell {
  display:           flex;
  align-items:       center;
  padding:           0 var(--item-padding-x);
  border-inline-end: var(--surface-border-width) solid var(--rule-soft, var(--rule));
  color:             var(--ink-soft);
  font-size:         var(--text-caption);
  font-variant-numeric: tabular-nums;
  white-space:       nowrap;
  overflow:          hidden;
}

.vl-sheet-cell.is-head {
  justify-content: flex-end;
  background:      var(--bg-soft);
  color:           var(--ink-dim);
  font-family:     var(--font-mono);
}

.vl-restored-row {
  min-height: calc(var(--control-height) * 1.5);
}