@import "tailwindcss";
@import "tailwind-scrollbar-hide/v4";
@import "tw-animate-css";
@import "@fontsource-variable/inter";

@source "./**/*.{ts,tsx}";
@source "../../../packages/**/src/**/*.{ts,tsx}";

@theme {
  --animate-wiggle: wiggle 0.5s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-2deg);
    }
    50% {
      transform: rotate(2deg);
    }
  }
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#root {
  min-height: 0;
}

@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

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

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

  ::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
  }

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