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

@layer base {
  * {
    @apply select-none;
  }
  ::-webkit-scrollbar {
    @apply w-3;
  }

  ::-webkit-scrollbar-track {
    @apply rounded-full bg-neutral-700;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-neutral-500;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply rounded-full bg-neutral-400;
  }
}

@layer utilities {
  .animate {
    @apply transition-all duration-300 ease-in-out;
  }
  .bg-gradient-purple {
    @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
  }
  .bg-gradient-red {
    @apply bg-gradient-to-br from-rose-600 to-red-400 hover:from-red-400 hover:to-rose-600;
  }
  .bg-gradient-white {
    @apply bg-gradient-to-br from-slate-400 to-neutral-100 hover:from-neutral-100 hover:to-slate-400;
  }
  .bg-gradient-upscayl {
    @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
  }
  .bg-gradient {
    @apply bg-gradient-to-br from-green-500 to-lime-300 hover:from-lime-300 hover:to-green-500;
  }
  .bg-gradient-blue {
    @apply bg-gradient-to-br from-blue-500 to-sky-400 hover:from-sky-400 hover:to-blue-500;
  }
  .step-heading {
    @apply mb-2 font-medium text-white/80;
  }
  .react-select-container {
    @apply w-40 text-black;
  }
  .react-select-container .react-select__control {
    @apply bg-gradient-white cursor-pointer rounded-lg p-1;
  }
  .react-select-container .react-select__menu {
    @apply rounded-lg bg-slate-300 p-1;
  }
  .react-select-container .react-select__option {
    @apply cursor-pointer rounded-md;
  }
}

.animate-step-in {
  animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);
}

@keyframes animate-step-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}