/* Theme and content sizing for the @magic-spells/bottom-sheet mobile filter. */
#mobile-filter-panel {
  --bs-panel-background: var(--surface, #fff);
  --bs-panel-border-radius: 24px;
  --bs-panel-box-shadow: 0 -10px 38px #172b4526;
  --bs-handle-color: #8190a2;
  --bs-handle-width: 38px;
  --bs-handle-height: 4px;
  --bs-content-padding: 20px;
  --bs-overlay-background: #101c2d70;
  --bs-overlay-blur: 3px;
}

html[data-theme=dark] #mobile-filter-panel {
  --bs-panel-box-shadow: 0 -10px 38px #0008;
  --bs-handle-color: #9ba8ba;
  --bs-overlay-background: #0009;
}

#mobile-filter-panel > dialog { color: var(--text, #1d1d1f); }
#mobile-filter-sheet bottom-sheet-header { min-height: 32px; cursor: ns-resize; }
#mobile-filter-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
#mobile-filter-content .popover-heading { margin-top: 0; }
#mobile-filter-content.schedule-popover .schedule-days {
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 12px 0 16px;
}
#mobile-filter-content.schedule-popover .schedule-days button { min-width: 0; }
#mobile-filter-content .location-scroll {
  max-height: none;
  padding: 0;
  overflow: visible;
  scrollbar-gutter: auto;
}
#mobile-filter-content #centre-list { max-height: none; overflow: visible; }
#mobile-filter-content .location-modal-actions { bottom: 0; margin-bottom: 0; }
#mobile-filter-content.location-modal #location-map { width: 100%; height: 240px; aspect-ratio: auto; }

@media (min-width: 621px) {
  #mobile-filter-panel { display: none; }
}

/* Allow the centre chips to pan horizontally inside the vertical sheet. */
#mobile-filter-content.centre-sheet{touch-action:pan-x pan-y}