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

@layer components {
  .switch-body {
    @apply m-0.5 bg-white relative w-10 h-6 rounded-full peer-checked:bg-gray-400 cursor-pointer border-solid border-2 border-gray-300 focus:ring-2 ring-blue-500;
  }
  .switch-nubbin {
    @apply w-2/5 h-4/5 bg-gray-400 absolute rounded-full left-0.5 top-0.5 peer-checked:bg-sky-500 peer-checked:left-5 transition-all duration-200;
  }
  .select-style {
    @apply  w-12 h-7 p-0 pl-1 mx-2 space-x-2 bg-white border-2 hover:border-sky-200 focus:border-sky-200 rounded-md;
  }
  .tooltip-button {
    @apply text-white bg-sky-400 hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-2.5 pb-0 pt-1 text-center;
  }
}