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

.context-menu-demo-area {
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  width:           100%;
  max-width:       var(--container-xs);
  min-height:      var(--space-40);
  padding:         var(--space-4);
  border:          var(--control-border-width) dashed var(--control-border);
  border-radius:   var(--radius-surface);
  color:           var(--ink-dim);
  font-size:       var(--text-ui);
  text-align:      center;
  user-select:     none;
}

.context-menu-demo-area[data-state="open"] {
  border-color: var(--focus);
}

.context-menu-demo-area:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.context-menu-demo-area[data-disabled] {
  color: var(--ink-faint);
}

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

.context-menu-demo-row {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-4);
  width:           100%;
}

.context-menu-demo-row > * {
  flex: 1 1 var(--space-48);
}

/* 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 > .context-menu-demo-log[data-testid],
.context-menu-demo-row > .context-menu-demo-log[data-testid] {
  align-self: stretch;
  min-height: 2lh;
  text-align: center;
}

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

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

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