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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.material-symbols-filled {
  font-variation-settings: "FILL" 1;
}

.uppy-Dashboard-inner, .uppy-Dashboard-inner * {
  background: transparent !important;
  border: none !important;
}

.uppy-Dashboard-AddFiles-title {
  color: black !important;
}

.uppy-Dashboard-AddFiles-info {
  display: none !important;
}

/* dark theme */
@media screen and (prefers-color-scheme: dark) {
  .uppy-Dashboard-AddFiles-title, .uppy-DashboardContent-title, .uppy-Dashboard-AddFiles-info, .uppy-Dashboard-Item-fileInfo {
    color: white !important;
  }
}

@media screen and (max-width: 500px) {
  .uppy-Dashboard-inner {
    width: 90vw !important;
  }
}

@media screen and (max-width: 320px) {
  .uppy-Dashboard-inner {
    width: 87vw !important;
  }
}

.noise {
  display: flex;
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
  min-height: max-content; 
}

.noise > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  min-height: max-content !important;
  overflow: hidden;
  min-width: initial !important;
  width: inherit !important;
}

.noise canvas {
  z-index: -2;
  top: 0;
  left: 0;
  position: absolute;
  height: 100vh;
  width: 100% !important;
}

.noise > div > div {
  flex: 1;
  position: relative;
  height: 100% !important;
  min-height: max-content !important;
  min-width: initial !important;
  width: inherit !important;
}

.noise-content {
  height: 100% !important;
  min-height: max-content !important;
}

.card-noise canvas {
  width: 100% !important;
}

.swiper-wrapper, .swiper-slide, .swiper {
  overflow: visible !important;
}

.swiper-scrollbar {
  @apply bg-primary/10 !important;
  transform: translateY(400%);
}

.swiper-scrollbar-drag {
  @apply bg-primary/50 rounded-full !important;
}

.recharts-area-area {
  fill: inherit !important;
}

.recharts-area-curve {
  stroke: inherit !important;
}

.recharts-cartesian-grid line {
  stroke: inherit !important;
}

@layer base {
  :root {
    --radius: 0.5rem;
  }
}

