@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .topic-card {
    @apply border border-gray-200 p-4 mb-4 rounded-lg;
  }
  .container.topic_grid_sec {
    @apply py-8 px-4;
  }
  
  /* Add styles for scroll buttons */
  .scroll-button {
    @apply absolute top-1/2 -translate-y-1/2 z-20 
           p-2 bg-gray-900/80 hover:bg-gray-900 
           text-white/70 hover:text-white 
           transition-all transform focus:outline-none;
  }
  
  /* Power Meter Component */
  .power-meter {
    @apply relative h-3 bg-gray-800/50 rounded-full overflow-hidden;
  }
  
  .power-meter-track {
    @apply absolute inset-0 rounded-full overflow-hidden;
  }
  
  .power-meter-fill {
    @apply h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
           transition-all duration-500 ease-out rounded-full;
  }
  
  .power-meter-segments {
    @apply absolute inset-0 flex;
  }
  
  .power-meter-segments .segment {
    @apply flex-1 border-r border-gray-700/60;
  }
  
  .power-meter-segments .segment:last-child {
    @apply border-r-0;
  }
  
  /* Power meter hover effect */
  .power-meter:hover .power-meter-fill {
    @apply shadow-lg;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  }
}