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

body {
  color-scheme: dark;
}

.pixelated {
  image-rendering: pixelated;
}

.checkerboard {
  background-size: 16px 16px;
  background-image: linear-gradient(
      45deg,
      theme("colors.plastic.700") 25%,
      transparent 25%,
      transparent 75%,
      theme("colors.plastic.700") 75%,
      theme("colors.plastic.700") 100%
    ),
    linear-gradient(
      45deg,
      theme("colors.plastic.700") 25%,
      theme("colors.plastic.600") 25%,
      theme("colors.plastic.600") 75%,
      theme("colors.plastic.700") 75%,
      theme("colors.plastic.700") 100%
    );
  background-position: 0px 0px, 8px 8px;
}

.styled-scrollbars {
  --scrollbar-foreground: theme("colors.zinc.700");
  --scrollbar-background: theme("colors.zinc.900");
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

.styled-scrollbars::-webkit-scrollbar-corner {
  background: transparent;
}

.styled-scrollbars::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.styled-scrollbars::-webkit-scrollbar-thumb {
  background: var(--scrollbar-foreground);
  border-radius: 4px;
}

.styled-scrollbars::-webkit-scrollbar-track {
  background: var(--scrollbar-background);
  border-radius: 4px;
}
