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

.date-range-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-range-picker-demo-presets {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

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

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

.date-range-picker-demo-field {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  width:          100%;
  max-width:      var(--container-xs);
}

.date-range-picker-demo-typed {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}

/* 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-range-picker-demo-log[data-testid] {
  align-self: stretch;
  min-height: 2lh;
}