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

@layer components {
  .indicator-dot {
    @apply w-2 h-2 rounded-full bg-zinc-500 opacity-60 transition-all duration-300 ease-out;
  }
  .indicator-dot--active {
    @apply bg-blue-500 opacity-100 rounded-full;
    width: 10px;
    height: 32px; 
  }
  .assessment-dot {
    @apply bg-gradient-to-r from-azure-500 to-azure-600;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }
  .assessment-dot.indicator-dot--active {
    @apply bg-gradient-to-r from-azure-500 to-azure-600;
    width: 12px;
    height: 36px;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
  }
}