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

.date-picker-demo-log {
  flex-basis:  100%;
  margin:      0;
  text-align:  center;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
}

.date-picker-demo-field {
  display:        grid;
  gap:            var(--space-3);
  justify-items:  start;
  width:          100%;
  max-width:      var(--container-xs);
}

.date-picker-demo-form {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.date-picker-demo-presets {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  max-width: calc(7 * var(--item-height));
}

.date-picker-demo-rtl {
  display:         flex;
  justify-content: center;
  width:           100%;
}

.date-picker-demo-time {
  padding-top: var(--space-3);
  border-top:  var(--surface-border-width) solid var(--surface-border);
}

.date-picker-demo-note {
  margin:    0;
  color:     var(--ink-dim);
  font-size: var(--text-sm);
}

.date-picker-demo-card {
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
  box-shadow:    var(--surface-shadow);
}

/* An echo line takes the stage's width and reserves two lines, so a longer
   or wrapping value never moves the controls beside or above it and never
   changes the demo's height (1280px, 390px and rtl). */
.demo-stage .date-picker-demo-log[data-testid] {
  align-self: stretch;
  min-height: 2lh;
}