/**
 * Dropdown Component Styles
 *
 * ARCHITECTURE:
 * - Shared styles: Apply to both desktop and mobile
 * - Desktop styles: Scoped under .dropdown-mode-desktop
 * - Mobile styles: Scoped under .dropdown-mode-mobile
 *
 * This prevents CSS conflicts between desktop dialog and mobile modal implementations.
 */
export declare const dropdownStyles = "\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n}\n\n:host {\n  --mobile-border-color: #5858587d; \n}\n\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Label styling */\n.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n  border-color: var(--ty-input-border-hover);\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n  background-color: var(--ty-input-disabled-bg);\n  color: var(--ty-input-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-stub:focus {\n  border-color: var(--ty-input-border-hover);\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-mode-desktop .dropdown-wrapper:has(.dropdown-chevron.open) .dropdown-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Size variants */\n.dropdown-mode-desktop .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Clearable adjustments */\n.dropdown-mode-desktop .dropdown-stub.xs.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-3) + 2rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-4) + 2rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-5) + 2rem + var(--ty-spacing-5));\n}\n\n/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n  color: var(--ty-input-placeholder);\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-desktop .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-input-placeholder);\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Clear button */\n.dropdown-mode-desktop .dropdown-clear-btn {\n  position: absolute;\n  top: 50%;\n  right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--ty-input-placeholder);\n  cursor: pointer;\n  transition: var(--ty-transition-colors);\n  display: none;\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:hover {\n  color: var(--ty-color-danger);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* Dialog */\n.dropdown-mode-desktop .dropdown-dialog {\n  position: fixed;\n  width: var(--dropdown-width, 200px);\n  max-width: 100vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--dropdown-padding, 20px);\n  opacity: 0;\n  transition: opacity 400ms ease;\n  transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-mode-desktop .dropdown-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above {\n  left: var(--dropdown-x);\n  bottom: var(--dropdown-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-options {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open {\n  display: flex;\n  opacity: 1;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-mode-desktop .dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* Dialog header */\n.dropdown-mode-desktop .dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.dropdown-mode-desktop .dropdown-search-input {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n  background-color: var(--ty-input-disabled-bg);\n  color: var(--ty-input-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-search-input::placeholder {\n  color: var(--ty-input-placeholder);\n}\n\n/* Search input sizes */\n.dropdown-mode-desktop .dropdown-search-input.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-input-placeholder);\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Options container */\n.dropdown-mode-desktop .dropdown-options {\n  opacity: 0;\n  background: var(--ty-input-bg);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-lg);\n  box-shadow: var(--ty-shadow-md);\n  max-height: 16rem;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  box-sizing: border-box;\n  box-shadow:\n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  transform: translateY(-20px) scale(0.90);\n  transition:\n    opacity 100ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  color: var(--ty-input-color);\n  cursor: pointer;\n  transition:\n    var(--ty-transition-colors),\n    transform 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  border: none;\n  background: none;\n  font-size: inherit;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  transform: translateX(0);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option:hover) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {\n  background-color: var(--ty-color-primary);\n  color: #ffffff;\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== MOBILE MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-mobile */\n/* Floating modal design (centered card with backdrop) */\n\n/* Stub (trigger button) - same as desktop but scoped */\n.dropdown-mode-mobile .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n  border-color: var(--ty-input-border-hover);\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n  background-color: var(--ty-input-disabled-bg);\n  color: var(--ty-input-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Size variants */\n.dropdown-mode-mobile .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-mobile .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-mobile .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Placeholder */\n.dropdown-mode-mobile .dropdown-placeholder {\n  color: var(--ty-input-placeholder);\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-mobile .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-input-placeholder);\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile modal - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 9999;\n  display: flex;\n  align-items: flex-start; /* Align to top */\n  justify-content: center;\n  padding-top: 10vh; /* Fixed position from top */\n  opacity: 0;\n  transition: opacity 300ms ease;\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .mobile-modal.open {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile backdrop - full viewport with blur */\n.dropdown-mode-mobile .mobile-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  z-index: 1;\n}\n\n/* Mobile content container - floating card (transparent background) */\n.dropdown-mode-mobile .mobile-modal-content {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px); /* Side margins */\n  max-width: 400px; /* Constrained width */\n  min-height: 200px;\n  max-height: calc(90vh - 10vh); /* Account for top padding */\n  opacity: 0;\n  transform: scale(0.95);\n  transition: \n    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-modal.open .mobile-modal-content {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Mobile search header - floating row with search and close */\n.dropdown-mode-mobile .mobile-search-header {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Header for non-searchable (close button only) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n  flex-shrink: 0;\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n  min-height: 40px;\n}\n\n/* Close button - circular with border */\n.dropdown-mode-mobile .mobile-close-button {\n  flex-shrink: 0;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ty-surface-floating);\n  border: 1px solid var(--ty-border-);\n  border-radius: 50%; /* Circular */\n  color: var(--ty-text-);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  padding: 0;\n  border: 3px solid;\n  border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n  background: var(--ty-bg-neutral);\n  border-color: var(--ty-border);\n  color: var(--ty-text);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n  transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Mobile search input */\n.dropdown-mode-mobile .mobile-search-input {\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--ty-surface-floating);\n  color: var(--ty-text);\n  border: 1px solid var(--ty-border-);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  height: 40px;\n  transition: var(--ty-transition-all);\n  outline: none;\n  border: 3px solid;\n  border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text--);\n}\n\n/* Mobile options container - floating card with elevation */\n.dropdown-mode-mobile .mobile-options-container {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: var(--ty-surface-floating); /* Floating card background */\n  border-radius: var(--ty-radius-lg);\n  border: 1px solid var(--ty-border-);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  border: 3px solid;\n  border-color: var(--mobile-border-color);\n}\n\n/* Hide scrollbar but keep functionality */\n.dropdown-mode-mobile .mobile-options-container {\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE/Edge */\n}\n\n.dropdown-mode-mobile .mobile-options-container::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, Opera */\n}\n\n/* Mobile option styling - native <option> only */\n.dropdown-mode-mobile .mobile-options-container ::slotted(option) {\n  display: block;\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  margin: 2px 8px;\n  color: var(--ty-text);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  border: none;\n  background: transparent;\n  font-size: var(--ty-font-sm);\n  font-family: inherit;\n  width: calc(100% - 16px);\n  text-align: left;\n  box-sizing: border-box;\n  border-radius: var(--ty-radius-sm);\n  min-height: 36px;\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option:active) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary-strong);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== FLAVOR VARIANTS ==================== */\n/* Apply to both modes */\n\n:host([flavor=\"primary\"]) .dropdown-stub,\n:host([flavor=\"primary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-primary);\n}\n\n:host([flavor=\"primary\"]) .dropdown-stub:hover,\n:host([flavor=\"primary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub,\n:host([flavor=\"secondary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-secondary);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub:hover,\n:host([flavor=\"secondary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub,\n:host([flavor=\"success\"]) .dropdown-search-input {\n  border-color: var(--ty-color-success);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub:hover,\n:host([flavor=\"success\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub,\n:host([flavor=\"danger\"]) .dropdown-search-input {\n  border-color: var(--ty-color-danger);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub:hover,\n:host([flavor=\"danger\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub,\n:host([flavor=\"warning\"]) .dropdown-search-input {\n  border-color: var(--ty-color-warning);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub:hover,\n:host([flavor=\"warning\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ==================== READONLY STATE ==================== */\n\n:host([readonly]) .dropdown-chevron {\n  display: none;\n}\n\n:host([readonly]) .dropdown-stub {\n  padding-right: var(--ty-spacing-3);\n}\n\n:host([readonly]) .dropdown-stub,\n:host([readonly]) .dropdown-stub slot[name=\"selected\"] {\n  cursor: initial;\n}\n";
//# sourceMappingURL=dropdown.d.ts.map