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

@layer components {
  .progress-bar {
    @apply transition-[width] duration-700 bg-primary h-1 rounded-full;
  }
  .progress-bar-wrapper {
    @apply bg-primary-content h-1 rounded-full mt-1;
  }
  .system-icon {
    @apply h-8 w-8 shrink-0 mr-3 opacity-90;
  }
  .extra-icon {
    @apply h-3 w-3 shrink-0 mr-2 text-primary;
  }
  .extra-sun-icon {
    @apply h-4 w-4 shrink-0 -mb-1 mr-2 text-primary;
  }
  .grid-apps {
    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4;
  }
  .extra-info {
    @apply text-xs truncate text-secondary;
  }
  .hover-effect {
    @apply no-underline md:hover:underline underline-offset-2 decoration-primary text-sm opacity-80 hover:opacity-100 transition-all ease-linear duration-150;
  }
  .heading {
    @apply text-lg text-secondary select-none truncate underline decoration-primary underline-offset-4;
  }
}