/* Global Tailwind-like badge skin for Bootstrap badges */

:root {
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);

  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);

  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);

  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);

  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);

  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);

  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-pink-600: oklch(59.2% 0.249 0.584);

  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
}

.badge:not(.badge-counter) {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 0.375rem !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1rem !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

.badge:not(.badge-counter),
.badge.text-bg-light:not(.badge-counter),
.badge.badge-light:not(.badge-counter) {
  color: var(--color-gray-400) !important;
  background-color: rgba(156, 163, 175, 0.1) !important;
  background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent) !important;
  border-color: rgba(156, 163, 175, 0.2) !important;
  border-color: color-mix(in oklab, var(--color-gray-400) 20%, transparent) !important;
}

.badge.text-bg-danger:not(.badge-counter),
.badge.badge-danger:not(.badge-counter) {
  color: var(--color-red-400) !important;
  background-color: rgba(248, 113, 113, 0.1) !important;
  background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent) !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
  border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent) !important;
}

.badge.text-bg-warning:not(.badge-counter),
.badge.badge-warning:not(.badge-counter) {
  color: var(--color-yellow-600) !important;
  background-color: rgba(250, 204, 21, 0.12) !important;
  background-color: color-mix(in oklab, var(--color-yellow-400) 12%, transparent) !important;
  border-color: rgba(250, 204, 21, 0.24) !important;
  border-color: color-mix(in oklab, var(--color-yellow-400) 24%, transparent) !important;
}

.badge.text-bg-success:not(.badge-counter),
.badge.badge-success:not(.badge-counter) {
  color: var(--color-green-400) !important;
  background-color: rgba(74, 222, 128, 0.1) !important;
  background-color: color-mix(in oklab, var(--color-green-400) 10%, transparent) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
  border-color: color-mix(in oklab, var(--color-green-500) 22%, transparent) !important;
}

.badge.text-bg-info:not(.badge-counter),
.badge.badge-info:not(.badge-counter),
.badge.text-bg-primary:not(.badge-counter),
.badge.badge-primary:not(.badge-counter) {
  color: var(--color-blue-400) !important;
  background-color: rgba(96, 165, 250, 0.12) !important;
  background-color: color-mix(in oklab, var(--color-blue-400) 12%, transparent) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  border-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent) !important;
}

.badge.text-bg-secondary:not(.badge-counter),
.badge.badge-secondary:not(.badge-counter),
.badge.text-bg-dark:not(.badge-counter),
.badge.badge-dark:not(.badge-counter) {
  color: var(--color-indigo-400) !important;
  background-color: rgba(129, 140, 248, 0.12) !important;
  background-color: color-mix(in oklab, var(--color-indigo-400) 12%, transparent) !important;
  border-color: rgba(129, 140, 248, 0.28) !important;
  border-color: color-mix(in oklab, var(--color-indigo-400) 28%, transparent) !important;
}

a.badge:not(.badge-counter):hover,
a.badge:not(.badge-counter):focus {
  filter: brightness(1.05);
  text-decoration: none;
}