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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .pending {
    @apply bg-yellow-50 border-yellow-500 text-yellow-500;
  }
  .approved {
    @apply bg-green-50 border-green-500 text-green-500;
  }
  .rejected {
    @apply bg-red-50 border-red-500 text-red-500;
  }
  .active {
    @apply text-primary-600;
  }
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #a9a9a9;
  border-radius: 5px;
  width: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8b8b8b;
}