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

.collapsible-demo-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  width:          100%;
  max-width:      22rem;
  padding:        var(--surface-padding-sm);
  background:     var(--surface-bg);
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
  box-shadow:     var(--surface-shadow);
}

.collapsible-demo-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
}

.collapsible-demo-title {
  margin:      0;
  font-family: var(--font-heading);
  font-size:   var(--text-ui);
  font-weight: var(--weight-strong);
}

.collapsible-demo-row {
  margin:        0;
  padding:       var(--space-2) var(--space-3);
  border:        var(--control-border-width) solid var(--control-border);
  border-radius: var(--radius-control);
  font-family:   var(--font-mono);
  font-size:     var(--text-ui-sm);
  color:         var(--ink-soft);
}

.collapsible-demo-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding-top:    var(--space-2);
}

.collapsible-demo-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  font-size:      var(--text-label);
}

.collapsible-demo-field small {
  color:     var(--ink-dim);
  font-size: var(--text-caption);
}

.collapsible-demo-controls {
  width:     100%;
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.collapsible-demo-tree {
  width:     100%;
  max-width: 18rem;
  font-size: var(--text-ui);
}

.collapsible-demo-tree ul {
  margin:       0;
  padding:      0 0 0 var(--space-4);
  list-style:   none;
}

.collapsible-demo-tree > ul {
  padding-left: 0;
}

.collapsible-demo-node {
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5);
  width:       100%;
  height:      var(--item-height);
  padding:     0 var(--item-padding-x);
  border:      0;
  border-radius: var(--radius-item);
  background:  transparent;
  color:       var(--ink);
  font:        inherit;
  text-align:  start;
  cursor:      pointer;
}

.collapsible-demo-node:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.collapsible-demo-node:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.collapsible-demo-node svg {
  width:  var(--icon-size);
  height: var(--icon-size);
  color:  var(--ink-dim);
}

.collapsible-demo-file {
  cursor: default;
}

.collapsible-demo-file:hover {
  background: transparent;
}

.collapsible-demo-spacer {
  display: inline-block;
  width:   var(--icon-size);
  flex:    none;
}

.collapsible-demo-faq {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-1);
  width:          100%;
  max-width:      28rem;
}

.collapsible-demo-answer {
  margin:    0;
  padding:   var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--text-ui);
  color:     var(--ink-soft);
}

.collapsible-demo-figure {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  width:          100%;
  max-width:      20rem;
  margin:         0;
}

.collapsible-demo-bars {
  display:       flex;
  align-items:   flex-end;
  gap:           var(--space-2);
  height:        calc(var(--control-height) * 3);
  padding:       var(--space-3);
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.collapsible-demo-bars span {
  flex:          1;
  height:        calc(var(--bar) * 100%);
  border-radius: var(--radius-control);
  background:    var(--accent);
}

.collapsible-demo-form {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  width:          100%;
}

/* A link-look trigger is a text-height box; give it a 24px or larger
   target (WCAG 2.5.8) without changing how it reads. */
.collapsible-demo-figure .button.is-link {
  align-self: flex-start;
  min-height: var(--control-height-sm);
}