@layer components {
  .skill-tag {
    @apply inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium
           bg-gray-800 text-gray-300 ring-1 ring-gray-700;

    &.-sm { @apply px-2 py-0.5 rounded; }
  }

  .status-badge {
    @apply inline-flex items-center gap-1.5 font-medium rounded-md ring-1;

    &.-compact { @apply text-xs px-3 py-1.5; }
    &.-full { @apply w-full justify-center gap-2 text-sm font-semibold px-4 py-2.5; }

    &.-pending-amber { @apply text-amber-400 bg-amber-500/10 ring-amber-500/30; }
    &.-pending-yellow { @apply text-yellow-400 bg-yellow-500/10 ring-yellow-500/30; }
    &.-approved { @apply text-green-400 bg-green-500/10 ring-green-500/30; }
    &.-rejected { @apply text-gray-400 bg-gray-500/10 ring-gray-500/30; }
    &.-info { @apply text-blue-400 bg-blue-500/10 ring-blue-500/30; }
  }
}