@import url("highlight.js/styles/github.css") (prefers-color-scheme: light);
@import url("highlight.js/styles/github-dark.css") (prefers-color-scheme: dark);

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

@layer utilities {
  .hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Chrome, Safari and Opera */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .word-break {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Animation utilities for smooth transitions */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}

html.dark {
  color-scheme: dark;
}
html.light {
  color-scheme: light;
}