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

html,
body {
  width: 100%;
}

/* Safe Area support for testing in browsers */
@supports (padding: max(0px)) {
  :root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
  }
}

body::before {
  content: "Safe bottom: " var(--safe-area-bottom);
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 5px;
  font-size: 12px;
  pointer-events: none;
}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

/* Invert colors of Lottie animations in dark mode */
.lottie-dark-mode {
  color-scheme: light;
  filter: brightness(0) invert(1);
}

iframe {
  background: var(--background);
}

.sp-wrapper {
  height: 100% !important;
  width: 100% !important;
}

.sp-preview-container {
  height: 100% !important;
  width: 100% !important;
}

.css-29ghe2 {
  z-index: 1000;
}

.css-1p3m7a8-multiValue {
  background-color: #f4f4f4 !important;
  border-radius: 4px !important;
}

.css-v7duua:hover {
  background-color: #ffe4dd !important;
}

.css-t3ipsp-control {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px black !important;
  border-radius: 6px !important;
}

.css-b62m3t-container {
  border-radius: 6px !important;
  height: 36px !important;
}

.css-13cymwt-control {
  border-color: hsl(var(--input)) !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  min-height: 36px !important;
  height: 36px !important;
}

.sp-preview-container {
  background: var(--background);
  border: hsl(var(--border));
  border-radius: 8px;
  height: 100% !important;
  width: 100% !important;
  min-height: 700px;
  min-width: 40vw !important;
  flex-grow: 1;
}

.sp-c-ikJbEZ {
  background: transparent !important;
  max-height: 100%;
  height: 100%;
  overflow: auto;
  border: transparent !important;
}

.sp-layout {
  max-height: 100%;
  height: 100%;
  overflow: auto;
}

.cm-content {
  margin-bottom: 100px !important;
}

.sp-preview-iframe {
  border: none;
  height: 100% !important;
  width: 100% !important;
  border-radius: 8px !important;
  background: var(--background);
}

.sp-c-euXojQ {
  height: 100% !important;
  max-height: 100vh;
  overflow-y: auto;
  background: transparent !important;
}

.sp-c-dyHYiL {
  background: transparent !important;
}

.sp-editor-viewer {
  height: 100% !important;
  max-height: 100%;
}

.sp-stack {
  height: 100% !important;
  max-height: 100%;
}

.sp-loading {
  display: none !important;
}

.cm-scroller {
  max-height: 100%;
  overflow-y: auto;
}

.sp-c-gtcpyq {
  height: 100% !important;
  max-height: 100%;
  overflow-y: auto;
}

.shimmer-effect {
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.36);
  position: absolute;
  width: 25%;
  height: 100%;
  transition: 200ms ease-out;
  transform: skewX(-45deg) translateX(-300%);
}

.group:hover .shimmer-effect {
  transform: skewX(-45deg) translateX(500%);
}

.shimmer-effect::after {
  display: block;
  box-sizing: border-box;
  content: "";
  position: absolute;
  width: 400%;
  height: 100%;
  transform: skewX(45deg) translateX(75%);
  transition: 200ms ease-out;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.36);
  border-radius: 50%;
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.loading-border {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  padding: 1px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255),
      rgba(0, 0, 0, 0.5),
      rgba(255, 255, 255));
  background-size: 200% 100%;
  animation: shimmer 4.5s ease-in-out infinite;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 210 83% 53%;
    --primary-foreground: 0 0% 98%;
    --primary-gradient-start: 210 83% 53%;
    --primary-gradient-end: 217 77% 49%;
    --mono-gradient-start: 0 0% 0%;
    --mono-gradient-end: 0 0% 45%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --kbd: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 5.9% 90%;
    --input: 240 4.9% 83.9%;
    --ring: 240 5% 64.9%;
    --alpha-300: 240 5% 84%;
    --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;
    --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%;
    --border-gradient-start: rgba(255, 255, 255, 0.01);
    --border-gradient-mid: rgba(0, 0, 0, 0.5);
    --border-gradient-end: rgba(255, 255, 255, 0.01);
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 240 4.8% 95.9%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --mono-gradient-start: 0 0% 100%;
    --mono-gradient-end: 0 0% 60%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 5.9% 10%;
    --kbd: 240 4.8% 95.9%;
    --muted-foreground: 240 4.4% 58%;
    --accent: 240 5.9% 10%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 3.8% 46.1%;
    --alpha-300: 240 3.7% 15.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%;
    --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%;
    --border-gradient-mid: rgba(255, 255, 255, 0.8);
  }

  @layer base {
    :root {
      --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%;
    }

    .dark {
      --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%;
    }
  }

  @media (min-width: 720px) {
    .min-720\: {
      --container-x-padding: 24px;
    }
  }

  @media (min-width: 1280px) {
    .min-1280\: {
      --container-x-padding: 32px;
    }
  }

  @media (min-width: 1536px) {
    .min-1536\: {
      --container-x-padding: 80px;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

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

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

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .bg-grid-purple\/\[0\.02\] {
    background-size: 30px 30px;
    background-image:
      linear-gradient(to right, rgb(29 31 211 / 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(29 31 211 / 0.02) 1px, transparent 1px);
  }

  .bg-grid-purple {
    background-size: 30px 30px;
    background-image:
      linear-gradient(to right, rgb(29 31 211 / 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(29 31 211 / 0.05) 1px, transparent 1px);
    mask-image: radial-gradient(circle at top, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at top,
        black 30%,
        transparent 70%);
    z-index: 0;
  }

  .bg-grid-white {
    background-size: 50px 50px;
    background-image:
      linear-gradient(to right, rgb(255 255 255 / 0.075) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(255 255 255 / 0.075) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center,
        black 40%,
        transparent 100%);
    transform: translateX(-10px);
    z-index: 0;
  }
}

[data-vaul-drawer-close-button] {
  display: none;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-appear {
  animation: appear 0.6s cubic-bezier(0.2, 0.85, 0.45, 1) forwards;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-700 {
  animation-delay: 700ms;
}

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up-fade {
  animation: slide-up-fade 0.4s ease-out;
}