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

.time-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);
}

.time-picker-demo-fields,
.time-picker-demo-pair {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--space-4);
  width:                 100%;
  max-width:             var(--container-xs);
}

.time-picker-demo-pair {
  grid-template-columns: auto auto;
  max-width:             none;
  width:                 auto;
}

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

/* The calendar and its time fields in one card (shadcn Date and Time Picker). */
.time-picker-demo-card {
  display:        flex;
  flex-direction: column;
  max-width:      100%;
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
  background:     var(--surface-bg);
  box-shadow:     var(--surface-shadow);
}

.time-picker-demo-card-footer {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--space-3);
  padding:               var(--space-3);
  border-top:            var(--surface-border-width) solid var(--surface-border);
}

.time-picker-demo-pair.is-end {
  align-items: end;
}

@media (max-width: 40rem) {
  .time-picker-demo-pair,
  .time-picker-demo-card-footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* A list or a sentence that runs to three lines on a phone reserves three. */
.demo-stage .time-picker-demo-log.is-long[data-testid] {
  min-height: 3lh;
}