@import '@fontsource/fira-sans';

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

@font-face {
  font-family: 'Twemoji Mozilla';
  src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
}

:root {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--p)) transparent;
}

::-webkit-scrollbar {
  background: transparent;
}

::-webkit-scrollbar:vertical {
  width: 0;
}

::-webkit-scrollbar:horizontal {
  height: 0;
}

@media (width >= 640px) {
  ::-webkit-scrollbar-thumb {
    @apply rounded-box bg-primary;
  }

  ::-webkit-scrollbar:vertical {
    width: 6px;
  }

  ::-webkit-scrollbar:horizontal {
    height: 6px;
  }
}