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

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  width: 100vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --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% 46.9%;
    --accent: 210 40% 96.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: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
  }
}

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

::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}

::-webkit-scrollbar-track {
  --bg-opacity: 0.5;
}

::-webkit-scrollbar-thumb {
  --bg-opacity: 0.5;
  background-color: #001479b3;
}

::-webkit-scrollbar-thumb {
  border-radius: 7px;
}

.sidebar::-webkit-scrollbar {
  width: 0rem;
  height: 0.25rem;
}
.sidebar::-webkit-scrollbar-thumb {
  --bg-opacity: 0.5;
  background-color: #001479b3;
}

.sidebar::-webkit-scrollbar-thumb {
  border-radius: 7px;
}

.sidebar::-webkit-scrollbar-track {
  --bg-opacity: 0.5;
}

::view-transition-group(root) {
  animation-duration: 0.7s;
  animation-timing-function: linear(
    0 0%,
    0.2342 12.49%,
    0.4374 24.99%,
    0.6093 37.49%,
    0.6835 43.74%,
    0.7499 49.99%,
    0.8086 56.25%,
    0.8593 62.5%,
    0.9023 68.75%,
    0.9375 75%,
    0.9648 81.25%,
    0.9844 87.5%,
    0.9961 93.75%,
    1 100%
  );
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
    top left / 0 no-repeat;
  mask-origin: content-box;
  animation: scale 1s;
  transform-origin: top left;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: scale 1s;
  transform-origin: top left;
  z-index: -1;
}

@keyframes scale {
  to {
    mask-size: 350vmax;
  }
}

.scrollToTheTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 10px;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}

.typewriter-wrapper {
  display: inline-block;
  min-height: 1.2em;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  background-color: currentColor;
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* required as there was a white background by default */
.razorpay-container {
  height: 70% !important;
  max-width: 380px;
  inset: 0;
  margin: auto;
}
