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

.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

:root {
  --color-primary: 59 130 246;     /* Tailwind blue-500 -> rgb(59,130,246) -> "59 130 246" */
  --color-secondary: 217 70 239;   /* fuchsia-500 */
  --color-foreground: 17 24 39;    /* gray-900 */
  --color-background: 255 255 255; /* white */
}

.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
  /* background: var(--color-foreground); */
  border-radius: 2px;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 2px;
}

@supports not selector(::-webkit-scrollbar) {
  .scrollbar-custom {
      scrollbar-color: var(--color-primary)
                     var(--color-foreground);
  }
}