/**
 * OverlayScrollbars Custom Theme - MAKWEST Brand
 * Brand secondary color: #e84e19
 * Responsive design: Ultra-thin on mobile/tablet, thicker on desktop with hover
 */

/* Base theme using CSS Custom Properties */
.os-theme-makwest-brand {
  /* Mobile/Tablet: Ultra-thin scrollbar (visual indicator only) */
  --os-size: 3px;
  --os-padding-perpendicular: 1px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 2px;
  --os-track-bg: rgba(0, 0, 0, 0.05);
  --os-track-bg-hover: rgba(0, 0, 0, 0.08);
  --os-handle-border-radius: 2px;
  --os-handle-bg: #e84e19;
  --os-handle-bg-hover: #e84e19;
  --os-handle-bg-active: #e84e19;
  --os-handle-min-size: 20px;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
}

/* Desktop: Larger scrollbars with hover effects (768px and up) */
@media (min-width: 768px) {
  .os-theme-makwest-brand {
    /* Desktop: Thin by default, expand on hover */
    --os-size: 6px;
    --os-padding-perpendicular: 2px;
    --os-padding-axis: 4px;
    --os-track-border-radius: 6px;
    --os-track-bg: rgba(0, 0, 0, 0.08);
    --os-track-bg-hover: rgba(0, 0, 0, 0.12);
    --os-handle-border-radius: 6px;
    --os-handle-min-size: 30px;
    --os-handle-perpendicular-size: 80%;
    --os-handle-perpendicular-size-hover: 100%;
    --os-handle-perpendicular-size-active: 100%;
  }
}

/* Large Desktop: Even more responsive (1024px and up) */
@media (min-width: 1024px) {
  .os-theme-makwest-brand {
    /* Large Desktop: More pronounced hover effects */
    --os-size: 8px;
    --os-padding-perpendicular: 2px;
    --os-padding-axis: 6px;
    --os-track-border-radius: 8px;
    --os-track-bg: rgba(0, 0, 0, 0.06);
    --os-track-bg-hover: rgba(0, 0, 0, 0.1);
    --os-handle-border-radius: 8px;
    --os-handle-min-size: 40px;
    --os-handle-perpendicular-size: 70%;
    --os-handle-perpendicular-size-hover: 100%;
    --os-handle-perpendicular-size-active: 110%;
  }
}

/* Hover effects and transitions */
.os-theme-makwest-brand .os-scrollbar-handle {
  transition: all 0.2s ease;
  opacity: 0.8;
}

.os-theme-makwest-brand .os-scrollbar-handle:hover {
  opacity: 1;
  box-shadow: 0 2px 6px rgba(232, 78, 25, 0.25);
}

.os-theme-makwest-brand .os-scrollbar-handle:active {
  opacity: 1;
  box-shadow: 0 3px 8px rgba(232, 78, 25, 0.4);
}

/* Desktop-specific hover effects */
@media (min-width: 768px) {
  .os-theme-makwest-brand .os-scrollbar {
    transition: all 0.3s ease;
  }
  
  .os-theme-makwest-brand .os-scrollbar:hover .os-scrollbar-handle {
    transform: scaleX(1.1);
  }
  
  .os-theme-makwest-brand .os-scrollbar:hover .os-scrollbar-track {
    background: var(--os-track-bg-hover);
  }
}

/* Mobile/Touch optimizations */
@media (max-width: 767px) {
  .os-theme-makwest-brand {
    /* Ultra-minimal on mobile - just a visual indicator */
    --os-size: 2px;
    --os-padding-perpendicular: 0px;
    --os-padding-axis: 1px;
    --os-track-bg: transparent;
    --os-track-bg-hover: transparent;
    --os-handle-perpendicular-size: 100%;
    --os-handle-perpendicular-size-hover: 100%;
    --os-handle-perpendicular-size-active: 100%;
  }
  
  /* Minimal transitions on mobile for performance */
  .os-theme-makwest-brand .os-scrollbar-handle {
    transition: opacity 0.2s ease;
    opacity: 0.6;
  }
  
  .os-theme-makwest-brand .os-scrollbar-handle:active {
    opacity: 0.9;
    box-shadow: none;
  }
}

/* Theme adaptations for light/dark modes */
.light .os-theme-makwest-brand {
  --os-track-bg: rgba(0, 0, 0, 0.04);
  --os-track-bg-hover: rgba(0, 0, 0, 0.08);
}

.dark .os-theme-makwest-brand {
  --os-track-bg: rgba(255, 255, 255, 0.06);
  --os-track-bg-hover: rgba(255, 255, 255, 0.1);
}

/* Auto-hide behavior adjustments */
@media (max-width: 767px) {
  /* Faster auto-hide on mobile */
  .os-theme-makwest-brand {
    --os-scrollbar-auto-hide-delay: 800ms;
  }
}

@media (min-width: 768px) {
  /* Longer visible time on desktop for better UX */
  .os-theme-makwest-brand {
    --os-scrollbar-auto-hide-delay: 1500ms;
  }
}