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

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

.menubar-demo-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
}

.menubar-demo-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         var(--item-gap);
}

/* The editor preview reserves the large size's line so a size change moves
   nothing below it. */
.menubar-demo-editor {
  display:       grid;
  align-items:   center;
  width:         100%;
  max-width:     32rem;
  min-height:    calc(var(--text-xl) * 3);
  padding:       var(--space-3);
  border:        1px solid var(--rule);
  border-radius: var(--radius-surface);
}

.menubar-demo-text {
  margin:      0;
  font-family: var(--font-sans);
  font-size:   var(--text-base);
}

.menubar-demo-text.is-mono   { font-family: var(--font-mono); }
.menubar-demo-text.is-small  { font-size: var(--text-sm); }
.menubar-demo-text.is-large  { font-size: var(--text-xl); }
.menubar-demo-text.is-start  { text-align: start; }
.menubar-demo-text.is-center { text-align: center; }
.menubar-demo-text.is-end    { text-align: end; }
.menubar-demo-text.is-bold   { font-weight: var(--weight-strong); }
.menubar-demo-text.is-italic { font-style: italic; }

/* The toolbar the View menu anchors to: wider and taller than its bar, so
   the menu visibly opens under the box rather than the trigger. */
.menubar-demo-anchor {
  display:       flex;
  padding:       var(--space-3) var(--space-5);
  border:        1px solid var(--rule);
  border-radius: var(--radius-surface);
}

/* An echo line takes its own full-width line under the controls and
   reserves its lines, so a longer or wrapping echo never moves a control or
   grows the demo (1280, 390, rtl). */
.demo-stage > .menubar-demo-log[data-testid],
.menubar-demo-row > .menubar-demo-log[data-testid] {
  align-self: stretch;
  min-height: 2lh;
  text-align: center;
}

.demo-stage:not(.is-column) > .menubar-demo-log[data-testid],
.menubar-demo-row > .menubar-demo-log[data-testid] {
  flex-basis: 100%;
}

.menubar-demo-log[data-testid].is-long {
  min-height: 3lh;
}

.menubar-demo-log[data-testid].is-longer {
  min-height: 4lh;
}