/**
 * Shared Styles Index
 */
import { useEffect } from 'react';
export * from './responsive';
// ============================================================================
// Global Responsive CSS for all Dropdown Variants
// ============================================================================
export const globalResponsiveCSS = `
/* ============================================
   SEEKORA DROPDOWN - RESPONSIVE STYLES
   ============================================ */

/* CSS Variables for responsiveness */
:root {
  --seekora-touch-target-min: 44px;
  --seekora-touch-target-comfortable: 48px;
  --seekora-mobile-padding: 16px;
  --seekora-desktop-padding: 20px;
}

/* Base responsive rules for all dropdowns */
[class*="seekora-"][class*="-dropdown"] {
  box-sizing: border-box;
}

[class*="seekora-"][class*="-dropdown"] * {
  box-sizing: border-box;
}

/* ============================================
   MOBILE STYLES (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Full-width dropdowns on mobile */
  [class*="seekora-"][class*="-dropdown"]:not(.seekora-mobile-sheet):not(.seekora-spotlight-dropdown) {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Touch-friendly item sizes */
  [class*="seekora-"][class*="-dropdown"] [role="option"],
  [class*="seekora-"][class*="-dropdown"] [data-item],
  [class*="seekora-"][class*="-dropdown"] .suggestion-item,
  [class*="seekora-"][class*="-dropdown"] .product-card {
    min-height: var(--seekora-touch-target-min);
  }

  /* Larger padding on mobile */
  [class*="seekora-"][class*="-dropdown"] [role="option"],
  [class*="seekora-"][class*="-dropdown"] [data-item] {
    padding: 14px var(--seekora-mobile-padding) !important;
  }

  /* Larger fonts on mobile for readability */
  [class*="seekora-"][class*="-dropdown"] {
    font-size: 16px !important;
  }

  /* Stack columns on mobile */
  [class*="seekora-"][class*="-dropdown"] .dropdown-content,
  [class*="seekora-"][class*="-dropdown"] [style*="display: flex"][style*="flex-direction"] {
    flex-direction: column !important;
  }

  /* Full-width columns on mobile */
  [class*="seekora-"][class*="-dropdown"] [style*="width: 40%"],
  [class*="seekora-"][class*="-dropdown"] [style*="width: 45%"],
  [class*="seekora-"][class*="-dropdown"] [style*="width: 50%"],
  [class*="seekora-"][class*="-dropdown"] [style*="width: 55%"],
  [class*="seekora-"][class*="-dropdown"] [style*="width: 60%"] {
    width: 100% !important;
    flex: none !important;
  }

  /* Product grid adjustments */
  [class*="seekora-"][class*="-dropdown"] .products-grid,
  [class*="seekora-"][class*="-dropdown"] [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Horizontal scroll for products on mobile */
  [class*="seekora-"][class*="-dropdown"] .products-scroll {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  [class*="seekora-"][class*="-dropdown"] .products-scroll > * {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* Hide keyboard hints on mobile */
  [class*="seekora-"][class*="-dropdown"] .keyboard-hint,
  [class*="seekora-"][class*="-dropdown"] [class*="keyboard"],
  [class*="seekora-"][class*="-dropdown"] kbd,
  [class*="seekora-"][class*="-dropdown"] .kbd {
    display: none !important;
  }

  /* Safe area padding for notched devices */
  [class*="seekora-"][class*="-dropdown"] [style*="padding-bottom"] {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* ============================================
   TOUCH DEVICE STYLES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Active state instead of hover for touch */
  [class*="seekora-"][class*="-dropdown"] [role="option"]:active,
  [class*="seekora-"][class*="-dropdown"] [data-item]:active,
  [class*="seekora-"][class*="-dropdown"] button:active {
    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.05)) !important;
    transform: scale(0.98);
  }

  /* Disable hover effects on touch */
  [class*="seekora-"][class*="-dropdown"] [role="option"]:hover,
  [class*="seekora-"][class*="-dropdown"] [data-item]:hover {
    background-color: transparent;
  }

  /* Larger touch targets */
  [class*="seekora-"][class*="-dropdown"] button,
  [class*="seekora-"][class*="-dropdown"] [role="button"] {
    min-height: var(--seekora-touch-target-min);
    min-width: var(--seekora-touch-target-min);
  }

  /* No text selection on touch */
  [class*="seekora-"][class*="-dropdown"] {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ============================================
   TABLET STYLES (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="seekora-"][class*="-dropdown"]:not(.seekora-mobile-sheet) {
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3-column product grid on tablet */
  [class*="seekora-"][class*="-dropdown"] .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================
   DESKTOP STYLES (>= 1024px)
   ============================================ */
@media (min-width: 1024px) {
  [class*="seekora-"][class*="-dropdown"] [role="option"],
  [class*="seekora-"][class*="-dropdown"] [data-item] {
    min-height: 40px;
  }

  /* Hover effects only on desktop */
  [class*="seekora-"][class*="-dropdown"] [role="option"]:hover,
  [class*="seekora-"][class*="-dropdown"] [data-item]:hover {
    background-color: var(--seekora-bg-hover, rgba(0,0,0,0.04));
  }
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */
@keyframes seekora-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes seekora-dropdown-enter-mobile {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes seekora-spin {
  to {
    transform: rotate(360deg);
  }
}

[class*="seekora-"][class*="-dropdown"].entering {
  animation: seekora-dropdown-enter 200ms ease-out;
}

@media (max-width: 767px) {
  [class*="seekora-"][class*="-dropdown"].entering {
    animation: seekora-dropdown-enter-mobile 300ms ease-out;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [class*="seekora-"][class*="-dropdown"],
  [class*="seekora-"][class*="-dropdown"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible styles */
[class*="seekora-"][class*="-dropdown"] [role="option"]:focus-visible,
[class*="seekora-"][class*="-dropdown"] button:focus-visible {
  outline: 2px solid var(--seekora-primary, #007aff);
  outline-offset: -2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  [class*="seekora-"][class*="-dropdown"] {
    border: 2px solid currentColor !important;
  }

  [class*="seekora-"][class*="-dropdown"] [role="option"][aria-selected="true"] {
    outline: 2px solid currentColor;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  [class*="seekora-"][class*="-dropdown"] {
    --seekora-bg-surface: #1c1c1e;
    --seekora-bg-secondary: #2c2c2e;
    --seekora-bg-hover: #3a3a3c;
    --seekora-text-primary: #ffffff;
    --seekora-text-secondary: #8e8e93;
    --seekora-border-color: #38383a;
  }
}
`;
/**
 * Inject global responsive styles
 */
let stylesInjected = false;
export const injectGlobalResponsiveStyles = () => {
    if (stylesInjected)
        return;
    if (typeof document === 'undefined')
        return;
    const styleId = 'seekora-dropdown-responsive-global';
    if (document.getElementById(styleId)) {
        stylesInjected = true;
        return;
    }
    const style = document.createElement('style');
    style.id = styleId;
    style.textContent = globalResponsiveCSS;
    document.head.appendChild(style);
    stylesInjected = true;
};
/**
 * Hook to auto-inject styles on mount
 */
export const useInjectResponsiveStyles = () => {
    useEffect(() => {
        injectGlobalResponsiveStyles();
    }, []);
};
