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

.dt-demo {
  width: 100%;
}

/* 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 what follows it. */
.dt-log {
  display:       block;
  width:         100%;
  min-height:    calc(var(--log-lines, 1) * 1lh);
  margin:        0;
  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) {
  .dt-log {
    min-height: calc(var(--log-lines-narrow, 2) * 1lh);
  }
}

.dt-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2);
}

.dt-detail {
  color:       var(--ink-soft);
  line-height: var(--leading-snug);
}

.dt-detail strong {
  color: var(--ink);
}

.dt-sheet-title {
  margin:      0;
  font-size:   var(--text-body);
  font-weight: var(--weight-strong);
}

.dt-sheet-tools,
.dt-sheet-foot {
  align-self: stretch;
}

.dt-sheet-foot {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-2);
}

.dt-sheet-tabs,
.dt-zoom {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.dt-sheet-tab[aria-pressed="true"] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

.dt-zoom-range {
  width:        calc(var(--control-height) * 3);
  accent-color: var(--accent);
}

.dt-zoom-value {
  min-width:            4ch;
  font-variant-numeric: tabular-nums;
  text-align:           end;
  color:                var(--ink-soft);
  font-size:            var(--text-ui-sm);
}