@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. */
.combobox-demo-log {
  text-align: center;
}

.combobox-demo-form {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-end;
  justify-content: center;
  gap:             var(--space-3);
  width:           100%;
}

.combobox-demo-field {
  width:     100%;
  max-width: var(--space-64);
}

.combobox-demo-avatar {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  width:           var(--space-5);
  height:          var(--space-5);
  border-radius:   var(--radius-pill);
  background:      var(--accent-soft);
  color:           var(--ink);
  font-size:       var(--text-caption);
  font-weight:     var(--weight-strong);
}

.combobox-demo-meta {
  margin-inline-start: auto;
  color:               var(--ink-dim);
  font-size:           var(--text-caption);
}

.combobox-demo-addon {
  display:     inline-flex;
  align-items: center;
}

.combobox-demo-emoji {
  font-size: var(--text-title);
}

.combobox-demo-anchor {
  display:       inline-flex;
  align-items:   center;
  padding:       var(--space-2) var(--space-3);
  border:        var(--control-border-width) dashed var(--rule);
  border-radius: var(--radius-control);
  color:         var(--ink-faint);
  font-size:     var(--text-caption);
}

.combobox-demo-boundary {
  width:         var(--space-64);
  max-width:     100%;
  height:        calc(var(--control-height) * 4);
  padding:       var(--space-2);
  border:        var(--control-border-width) dashed var(--rule);
  border-radius: var(--radius-control);
}