@import 'tailwindcss';
@plugin "flowbite-react/plugin/tailwindcss";
@source "../.flowbite-react/class-list.json";
@source "../node_modules/react-tailwindcss-datepicker/dist/index.esm.js";

:root {
  --background: #ffffff;
  --foreground: #171717;
  scroll-behavior: smooth;
}

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

@theme {
  --color-primary: #033d91;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-figtree);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
}

.loader {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}

.iti__tel-input,
.iti__search-input {
  @apply !border !border-gray-300 !bg-gray-50 !rounded-md focus:!ring focus:!ring-primary focus:!outline-none !w-full !py-2.5 !text-sm;
}

.iti__search-input {
  @apply !px-3;
}

@layer utilities {
  * {
    box-sizing: border-box;
  }
  .opacity-1 {
    opacity: 100%;
  }

  /* Sidebar scroll utilities */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

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

@layer base {
  button {
    @apply cursor-pointer;
  }

  hr {
    @apply border-slate-200;
  }
}

.strike-through-price {
  @apply text-red-500 line-through block text-xs font-medium;
}

@keyframes l5 {
  0% {
    box-shadow:
      20px 0 #000,
      -20px 0 #0002;
    background: #000;
  }
  33% {
    box-shadow:
      20px 0 #000,
      -20px 0 #0002;
    background: #0002;
  }
  66% {
    box-shadow:
      20px 0 #0002,
      -20px 0 #000;
    background: #0002;
  }
  100% {
    box-shadow:
      20px 0 #0002,
      -20px 0 #000;
    background: #000;
  }
}

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

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}