@import 'tailwindcss';

@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@import './theme.css';

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

  /* Global scrollbar styling to match ScrollArea */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

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

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

  ::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--muted-foreground);
  }
}

/* View Transition Wave Effect */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  /* Ensure the outgoing view (old theme) is beneath */
  z-index: 0;
}

::view-transition-new(root) {
  /* Ensure the incoming view (new theme) is always on top */
  z-index: 1;
}

@keyframes reveal {
  from {
    /* Use CSS variables for the origin, defaulting to center if not set */
    clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
    opacity: 0.7;
  }
  to {
    /* Use CSS variables for the origin, defaulting to center if not set */
    clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
    opacity: 1;
  }
}

::view-transition-new(root) {
  /* Apply the reveal animation */
  animation: reveal 0.4s ease-in-out forwards;
}
