@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    html{
      @apply scroll-smooth;
    }
    body{

    }
   *::-webkit-scrollbar {
      @apply w-[3px] h-[3px];
    }

   *::-webkit-scrollbar-track {
      @apply bg-zinc-400;
    }

   *::-webkit-scrollbar-thumb {
      @apply rounded bg-indigo-800 outline-0;
    }
    .badge-new{
        @apply inline-flex items-center rounded-full bg-orange-50 px-1.5 py-0.5 text-xs font-medium text-orange-600 ring-1 ring-inset ring-orange-500/10;
    }

    .info-data .info-group-data{
        @apply bg-white p-3 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500;
    }
    .tool-tip-item{
        @apply relative  transition-opacity rounded-full outline-none inline-flex justify-center items-center transition-all ease-in duration-150 focus:ring-2 focus:ring-offset-2 hover:shadow-sm disabled:opacity-80 disabled:cursor-not-allowed rounded gap-x-2 text-sm leading-4 px-3 py-2     border text-slate-500 hover:bg-slate-100 ring-slate-200 dark:ring-slate-600 dark:border-slate-500
        dark:ring-offset-slate-800 dark:text-slate-400 dark:hover:bg-slate-700;
    }
    .tool-tip-item .tool-tip{
        @apply absolute capitalize z-10 bottom-full transition-opacity invisible inline-block px-2 py-1 text-[9px] font-medium text-white bg-gray-900 rounded-sm shadow-sm opacity-0;
    }
    .tool-tip-item:hover .tool-tip{
        @apply visible opacity-100;
    }

}