@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
html{
    font-family: Poppins, sans-serif;}

  body {
   background-color: #fff;
   overflow-x: hidden
  }
 @layer components {
  .input-box {
    @apply w-full flex justify-between gap-3 text-sm text-black bg-slate-100 rounded px-4 py-3 mb-4 mt-3 border border-slate-200 outline-none
  }
  .btn-primary {
    @apply w-full text-sm font-medium text-white bg-primary shadow-lg shadow-primary/5 p-[10px] rounded-md my-1 hover:bg-primary/15 hover:text-primary
  }
  .option-chip{
    @apply text-xs font-medium text-sky-700 bg-sky-100 rounded-lg px-4 py-1.5 border border-sky-50 cursor-pointer hover:border-primary
  }
  .btn-small{
    @apply flex items-center gap-1 text-xs font-medium bg-primary text-white hover:bg-sky-200/60 hover:text-primary rounded px-3 py-[4px]
  }
  .icon-btn{
    @apply text-[20px] text-slate-300 cursor-pointer hover:text-blue-500
  }

  .info-text{
    @apply text-sm text-primary font-medium text-center bg-gray-100 rounded-lg
  }
 }
}