/* Filter dropdown component styles */

/* Base dropdown transitions */
[data-filter-dropdown-target="dropdown"] {
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

/* Dropdown open state - desktop */
[data-filter-dropdown-target="dropdown"].is-open:not(.is-bottom-sheet) {
  opacity: 1;
  transform: scale(1);
}

/* Dropdown animating in - desktop */
[data-filter-dropdown-target="dropdown"].is-animating-in:not(.is-bottom-sheet) {
  opacity: 0;
  transform: scale(0.95);
}

/* Bottom sheet mode - mobile
   Uses max-height instead of fixed height to allow auto-sizing for small content
   while providing scroll threshold for large content */
[data-filter-dropdown-target="dropdown"].is-bottom-sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  min-width: 0 !important;
  max-height: 75vh;
  border-radius: 0.75rem 0.75rem 0 0;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transition: transform 200ms ease-out;
  display: flex;
  flex-direction: column;
}

/* Full height bottom sheet - for complex filters like "all filters" */
[data-filter-dropdown-target="dropdown"].is-bottom-sheet.is-full-height {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

[data-filter-dropdown-target="dropdown"].is-bottom-sheet.is-animating-in {
  transform: translateY(100%);
}

[data-filter-dropdown-target="dropdown"].is-bottom-sheet.is-open {
  transform: translateY(0);
}

[data-filter-dropdown-target="dropdown"].is-bottom-sheet.is-animating-out {
  transform: translateY(100%);
}

/* Backdrop */
[data-filter-dropdown-target="backdrop"] {
  transition: opacity 200ms ease-out;
}

[data-filter-dropdown-target="backdrop"].is-visible {
  opacity: 0.5;
}