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

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

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

/* Larger cells, capped on a phone to a seventh of the room the demo leaves
   (the page gutters, the demo's stage padding and the calendar's own), so
   all seven columns and their focus rings stay inside the demo. */
.calendar-demo-large {
  --calendar-cell-size: min(var(--control-height-lg), calc((100vw - 7rem) / 7));
}

.calendar-demo-priced {
  --calendar-cell-size: min(calc(var(--control-height-lg) + var(--space-3)), calc((100vw - 7rem) / 7));
}

.calendar-demo-presets {
  display:   flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.calendar-demo-presets .calendar {
  background: transparent;
}

.calendar-demo-preset-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding:        var(--space-3);
  border-inline-start: var(--surface-border-width) solid var(--surface-border);
}

.calendar-demo-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-basis:  100%;
  justify-content: center;
}

.calendar-demo-events {
  min-height:  calc(5 * var(--leading-normal) * var(--text-xs));
  margin:      0;
  padding:     0;
  list-style:  none;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  line-height: var(--leading-normal);
  color:       var(--ink-dim);
  text-align:  center;
}

.calendar-demo-card[data-testid="disabled"] .calendar-day[data-modifiers~="booked"] > .calendar-day-button {
  text-decoration: line-through;
}

@media (max-width: 40rem) {
  .calendar-demo-preset-list {
    flex-direction: row;
    flex-wrap:      wrap;
    border-inline-start: 0;
    border-top:     var(--surface-border-width) solid var(--surface-border);
    width:          100%;
  }
}

.calendar-demo-actions .calendar-demo-log {
  flex-basis: auto;
}

.calendar-demo-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-ui);
  color:       var(--ink-dim);
}

.calendar-demo-stack {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  max-width:      100%;
}

.calendar-demo-pair {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-4);
  max-width:       100%;
}

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

/* The month echo sits in the actions row beside its button and keeps one
   fixed-length line. */
.calendar-demo-actions .calendar-demo-log[data-testid] {
  align-self: center;
  min-height: 0;
}

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