src/css/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  -webkit-tap-highlight-color: transparent;
}

@layer components {
  .input {
    @apply appearance-none mb-2 block w-full text-base min-w-56 p-2 bg-zinc-50 ring-inset shadow-sm border-0 focus:outline-0 dark:bg-zinc-800 rounded-md ring-1 focus:ring-sky-700 focus:ring-2 dark:focus:ring-sky-500 ring-zinc-300 dark:ring-zinc-700;
  }
  .label {
    @apply block font-semibold text-base mb-2;
  }
  .floating-button {
    @apply p-3 cursor-pointer rounded-md shadow-sm ring-1 bg-zinc-50 dark:bg-zinc-900 dark:hover:bg-zinc-800 hover:bg-zinc-100 transition duration-100 ring-zinc-200 dark:ring-zinc-800 active:scale-[95%] ease-[ease];
  }
  .button {
    @apply w-full bg-sky-700 disabled:opacity-70 disabled:cursor-not-allowed [&:not(:disabled)]:hover:bg-sky-600 [&:not(:disabled)]:active:scale-[99%] transition duration-150 ease-[ease] py-2 px-4 rounded-md shadow-sm;
  }
  .badge {
    @apply select-none inline-flex items-center gap-2 px-2 py-1 text-sm font-semibold ring-1 rounded-md focus-within:ring-2 align-middle;
  }
  .toast {
    @apply z-[999999] flex px-4 py-3 gap-2 text-base shadow-lg ring-1 ring-zinc-300 dark:ring-zinc-400 text-zinc-900 dark:text-zinc-50 bg-zinc-50 dark:bg-zinc-600 align-middle items-center sm:min-w-72  rounded-md transition  duration-200 ease-[ease] opacity-0 transform translate-y-6;
  }
  .toast.error {
    @apply ring-red-200 dark:ring-red-400 text-[#e60000] bg-[#fff0f0] dark:bg-[#772626] dark:text-[#fff0f0]
  }
  .toast.success {
    @apply ring-green-200 dark:ring-green-400 text-[#006600] bg-[#f0fff0] dark:bg-[#267326] dark:text-[#f0fff0]
  }
  .toast.info {
    @apply ring-blue-200 dark:ring-blue-400 text-[#004c99] bg-[#f0f8ff] dark:bg-[#264d79] dark:text-[#f0f8ff]
  }
  .toast.warning {
    @apply ring-yellow-200 dark:ring-yellow-400 text-[#cc7a00] bg-[#fff9e6] dark:bg-[#7f5a00] dark:text-[#fff9e6]
  }
  .toast svg {
    @apply mt-0.5;
  }
  .show.toast {
    @apply transform translate-y-0 opacity-100;
  }
}
