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

@layer base {
  :root {
    --chart-success: 146 80% 35%;
    --chart-fail: 339 90% 51%;
    --chart-critical: 336 75% 39%;
    --chart-high: 339 90% 51%;
    --chart-medium: 26 100% 55%;
    --chart-low: 46 97% 65%;
    --chart-1: 12 76% 61%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-success: 146 80% 35%;
    --chart-fail: 339 90% 51%;
    --chart-critical: 336 75% 39%;
    --chart-high: 339 90% 51%;
    --chart-medium: 26 100% 55%;
    --chart-low: 46 97% 65%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer utilities {

  /* Hide scrollbar */
  .no-scrollbar {
    scrollbar-width: none;
  }

  .checkbox-update {
    @apply mr-2 bg-background;
  }
}

@layer components {

  .animate-download-icon polyline,
  .animate-download-icon line {
    @apply animate-drop-arrow;
    transform-box: fill-box;
    transform-origin: center;
  }
}