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

@layer components {
  .btn {
    @apply px-4 py-2 font-semibold text-white transition-colors duration-100 bg-opacity-100 shadow bg-hsrm-gray-light hover:bg-opacity-75 ;
  }
  .btn-primary {
    @apply bg-hsrm-red hover:bg-hsrm-red-light;
  }
  .badge {
    @apply text-sm font-medium text-center font-bold rounded-lg uppercase bg-gray-300 bg-opacity-50 px-2 py-1.5 shadow;
  }
  .badge-hover {
    @apply hover:bg-opacity-75;
  }
  .badge-xl {
    @apply text-2xl;
  }
  .badge-status {
    @apply block w-24;
  }
  .icon {
    @apply inline text-hsrm-gray size-7 drop-shadow;
  }
  .icon-disabled {
    @apply text-opacity-25 hover:text-opacity-25;
  }
  .icon-hover {
    @apply hover:text-opacity-75;
  }
  .card-status {
    @apply uppercase shadow-lg bg-opacity-60 min-h-20 hover:bg-opacity-80;
  }
}