@import 'tailwindcss';
@import 'leaflet/dist/leaflet.css';

@custom-variant dark (&:is(.dark *));
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

@source '../node_modules/fumadocs-ui/dist/**/*.js';
@plugin 'tailwindcss-animate';

@media (min-width: 768px) {
  #nd-sidebar > div:first-child {
    padding-top: calc(var(--spacing) * 3.5);
  }
}
/* @plugin "@tailwindcss/typography"; */

.prose
  :where(ul > li):not(
    :where([class~='not-prose'], [class~='not-prose'] *)
  )::marker {
  color: #e84142;
}

div.group\/accordion h3  {
  margin-top: 0 !important;
}

/* .light .prose :where(a:not([data-card])):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: #18181B; 
}
.light .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: #18181B; 
} */

/* .dark .prose :where(a:not([data-card])):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: #F5F5F9;
}

.dark .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: #F5F5F9;
} */

.uwu {
  --background: 240 80% 94% !important;
  --popover: 240 80% 94% !important;
  --primary: #1f66f4 !important;
  --border: 230 30% 87% !important;
  --accent: 250 80% 90% !important;
  --secondary: 230 40% 94% !important;
  --muted: 230 80% 92% !important;
  --card: 230 90% 94% !important;
}

.uwu.dark {
  --background: 240 40% 20% !important;
  --popover: 240 20% 20% !important;
  --primary: #1f66f4 !important;
  --border: 230 30% 30% !important;
  --muted: 230 30% 36.3% !important;
  --secondary: 250 30% 36.3% !important;
  --accent: 250 20% 38.3% !important;
  --muted-foreground: 230 80% 84% !important;
  --card: 230 40% 26.3% !important;
}

/* Fix padding bug in Code block */
.nd-codeblock .highlighted {
  padding: 0 16px;
}

/* svg.lucide {
  color: #1f66f4;
}

.my-6 > svg.lucide {
  color: #fff;
} */

.text-fd-primary {
  --tw-text-opacity: 1;
  color: #1f66f4;
}

.bg-fd-primary\/10 {
  background-color: #1f66f41a;
}

h2.text-sm.font-medium {
  color: #737373;
}

.mb-2.inline-flex.size-7.items-center.justify-center.rounded-full.bg-fd-primary.font-medium.text-fd-primary-foreground {
  background-color: hsl(0deg 0% 49.74%);
  color: #fff;
}

.text-fd-muted-foreground {
  color: #737373;
}

.hide-icons svg.lucide.lucide-folder,
svg.lucide.lucide-folder-open {
  display: none;
}

nav a:not(:first-child) {
  display: none;
}

@keyframes ripple {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.animate-ripple {
  animation: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
  animation-delay: calc(var(--i) * 0.5s);
}

.bg-fd-foreground\/25 {
  background-color: #4bccff96;
}

.border-avax-red {
  --tw-border-opacity: 1;
  border-color: #e84142;
}

.bg-avax-red {
  --tw-bg-opacity: 1;
  background-color: #e84142;
}

.text-avax-red {
  --tw-text-opacity: 1;
  color: #e84142;
}

/* Avax red opacity variants */
.bg-avax-red\/5 {
  background-color: rgba(232, 65, 66, 0.05);
}

.bg-avax-red\/10 {
  background-color: rgba(232, 65, 66, 0.1);
}

.bg-avax-red\/20 {
  background-color: rgba(232, 65, 66, 0.2);
}

.border-avax-red\/30 {
  border-color: rgba(232, 65, 66, 0.3);
}

.border-avax-red\/40 {
  border-color: rgba(232, 65, 66, 0.4);
}

.border-avax-red\/60 {
  border-color: rgba(232, 65, 66, 0.6);
}

.shadow-avax-red\/25 {
  --tw-shadow-color: rgba(232, 65, 66, 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-avax-red\/40 {
  --tw-shadow-color: rgba(232, 65, 66, 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

/* Additional hover background variants */
.hover\:bg-avax-red\/5:hover {
  background-color: rgba(232, 65, 66, 0.05) !important;
}

.hover\:bg-avax-red\/10:hover {
  background-color: rgba(232, 65, 66, 0.1) !important;
}

.hover\:shadow-avax-red\/25:hover {
  --tw-shadow-color: rgba(232, 65, 66, 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.group:hover .group-hover\:bg-avax-red\/10 {
  background-color: rgba(232, 65, 66, 0.1) !important;
}

.group:hover .group-hover\:bg-avax-red\/20 {
  background-color: rgba(232, 65, 66, 0.2) !important;
}

.hover\:bg-avax-red\/10:hover {
  background-color: rgba(232, 65, 66, 0.1) !important;
}

.border-avax-green {
  --tw-border-opacity: 1;
  border-color: #0b7f54;
}

.bg-avax-green {
  --tw-bg-opacity: 1;
  background-color: #0b7f54;
}

.my-6 > svg.lucide {
  color: #fff;
}

#comment-box {
  max-height: 60vh;
  overflow-y: auto;
}

#comment-box::-webkit-scrollbar {
  width: 1px;
}

#comment-box::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#comment-box::-webkit-scrollbar-thumb {
  background: #3752ac;
  border-radius: 1px;
}

#comment-box::-webkit-scrollbar-thumb:hover {
  background: #2a3f85;
}

@media screen and (max-width: 768px) {
  #comment-box {
    max-height: 250px;
  }
}

@media screen and (max-width: 480px) {
  #comment-box {
    max-height: 200px;
  }
}

.quiz-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f3f4f6;
  color: #4b5563;
  font-weight: 600;
  margin-right: 8px;
}

.quiz-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fef3c7;
  color: #92400e;
  margin-right: 8px;
}

.quiz-try-again-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-weight: 600;
  color: #4b5563;
  background-color: white;
  transition: background-color 0.2s;
}

.quiz-try-again-button:hover {
  background-color: #f9fafb;
}

.quiz-try-again-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

@media (max-width: 639px) {
  [data-state='open'][data-orientation='horizontal'] {
    max-height: 75vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  [data-state='open'][data-orientation='horizontal']::-webkit-scrollbar {
    width: 4px;
  }

  [data-state='open'][data-orientation='horizontal']::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 2px;
  }

  div[class*='flex flex-col sm:hidden']:nth-last-of-type(-n + 3) > a {
    display: none;
  }

  /* for hiding avagpt */
  [data-open='true'] {
    z-index: 250;
  }

  [data-state='open'] {
    z-index: 450;
  }
}

.tools-page svg.lucide {
  color: #eb4c50 !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* This is a workaround for this issue: https://github.com/shadcn-ui/ui/issues/4227 */
html body[data-scroll-locked] {
  overflow: visible !important;
  margin-right: 0 !important;
}
/* 
@layer base {
  :root {
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --background: 0 0% 96%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 96%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 45%;
    --accent: 0 0% 90.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --background: 0 0% 0%;
    --foreground: 210 40% 98%;
    --card: 0 0% 0%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 0 0% 8%;
    --muted-foreground: 0 0% 60%;;
    --accent: 0 0% 15%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 0% 14%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
} */

html {
  scroll-behavior: smooth;
}

/* This is a workaround for this issue: https://github.com/shadcn-ui/ui/issues/4227 */
html body[data-scroll-locked] {
  overflow: visible !important;
  margin-right: 0 !important;
}

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

:root {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --radius: 0.5rem;
  --background: oklch(96.96% 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0 0 0);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.98 0 0); /* near-white text/icons */
  --primary-foreground: oklch(0.2 0 0);
  --secondary: oklch(0.12 0 0);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.16 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --accent: oklch(0.14 0 0);
  --accent-foreground: oklch(0.92 0 0);
  --destructive: oklch(0.6 0.02 30);
  --border: oklch(0.2 0 0);
  --input: oklch(0.2 0 0);
  --ring: oklch(0.7 0 0);
  --chart-1: oklch(0.6 0 0);
  --chart-2: oklch(0.5 0 0);
  --chart-3: oklch(0.4 0 0);
  --chart-4: oklch(0.3 0 0);
  --chart-5: oklch(0.2 0 0);
  --sidebar: oklch(0.08 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.9 0 0);
  --sidebar-primary-foreground: oklch(0.1 0 0);
  --sidebar-accent: oklch(0.12 0 0);
  --sidebar-accent-foreground: oklch(0.9 0 0);
  --sidebar-border: oklch(0.18 0 0);
  --sidebar-ring: oklch(0.7 0 0);
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

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

@layer utilities {
  .bg-gradient-radial {
    background-image: radial-gradient(circle, var(--tw-gradient-stops));
  }

  .bg-repeat-gradient-to-r {
    background-image: repeating-linear-gradient(
      to right,
      var(--tw-gradient-stops)
    );
  }

    .bg-repeat-gradient-to-br {
    background-image: repeating-linear-gradient(
      to bottom right,
      var(--tw-gradient-stops)
    );
  }

  .border-opacity-[amount] {
    border-color: color-mix(
      in srgb,
      currentColor,
      transparent calc(100% - var(--amount))
    );
  }

  @keyframes stroke {
    from {
      stroke-dasharray: 1000;
    }
    to {
      stroke-dasharray: 1000;
      stroke-dashoffset: 2000;
    }
  }
  .animate-stroke {
    animation: stroke 5s linear infinite;
  }

  .container {
    max-width: 1400px;
  }

  .text-opacity-[amount] {
    color: color-mix(
      in srgb,
      currentColor,
      transparent calc(100% - var(--amount))
    );
  }

  .text-shadow-[shadow] {
    text-shadow: var(--shadow);
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}
