.status-chip-v2 {
  --status-chip-color-50: var(--color-gray-50);
  --status-chip-color-300: var(--color-gray-300);
  --status-chip-color-400: var(--color-gray-400);
  --status-chip-color-500: var(--color-gray-500);
  --status-chip-color-600: var(--color-gray-600);
  --status-chip-color-800: var(--color-gray-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid transparent;
  font-family: var(--font-family-primary, "Albert Sans", sans-serif);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--fw-static-black-000) 35%, transparent);
}

.status-chip-v2--xs {
  min-height: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.34375rem;
  gap: 2px;
}
.status-chip-v2--compact {
  min-height: 16px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.5625rem;
  gap: 3px;
}
.status-chip-v2--sm {
  min-height: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  gap: 5px;
}
.status-chip-v2--md {
  min-height: 26px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  gap: 6px;
}
.status-chip-v2--lg {
  min-height: 32px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8125rem;
  gap: 7px;
}
.status-chip-v2--pill {
  border-radius: 999px;
}

.status-chip-v2--filled {
  background: var(--status-chip-color-300);
  color: var(--fw-white-000);
}

.status-chip-v2--gradient {
  background: linear-gradient(to top right, var(--status-chip-color-400), var(--status-chip-color-300));
  color: var(--fw-white-000);
}

.status-chip-v2--outlined {
  border-color: var(--status-chip-color-500);
  background: transparent;
  color: color-mix(in oklab, var(--status-chip-color-400) 78%, var(--fw-text-color));
}

.status-chip-v2--ghost {
  background: color-mix(in oklab, var(--status-chip-color-500) 18%, transparent);
  color: color-mix(in oklab, var(--status-chip-color-300) 82%, var(--fw-text-color));
  box-shadow: none;
}

.status-chip-v2__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-chip-v2__indicator {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-chip-v2--compact .status-chip-v2__indicator {
  width: 5px;
  height: 5px;
}
.status-chip-v2__icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

.status-chip-v2--slate {
  --status-chip-color-50: var(--color-slate-50);
  --status-chip-color-300: var(--color-slate-300);
  --status-chip-color-400: var(--color-slate-400);
  --status-chip-color-500: var(--color-slate-500);
  --status-chip-color-600: var(--color-slate-600);
  --status-chip-color-800: var(--color-slate-800);
}
.status-chip-v2--gray {
  --status-chip-color-50: var(--color-gray-50);
  --status-chip-color-300: var(--color-gray-300);
  --status-chip-color-400: var(--color-gray-400);
  --status-chip-color-500: var(--color-gray-500);
  --status-chip-color-600: var(--color-gray-600);
  --status-chip-color-800: var(--color-gray-800);
}
.status-chip-v2--stone {
  --status-chip-color-50: var(--color-stone-50);
  --status-chip-color-300: var(--color-stone-300);
  --status-chip-color-400: var(--color-stone-400);
  --status-chip-color-500: var(--color-stone-500);
  --status-chip-color-600: var(--color-stone-600);
  --status-chip-color-800: var(--color-stone-800);
}
.status-chip-v2--red {
  --status-chip-color-50: var(--color-red-50);
  --status-chip-color-300: var(--color-red-300);
  --status-chip-color-400: var(--color-red-400);
  --status-chip-color-500: var(--color-red-500);
  --status-chip-color-600: var(--color-red-600);
  --status-chip-color-800: var(--color-red-800);
}
.status-chip-v2--orange {
  --status-chip-color-50: var(--color-orange-50);
  --status-chip-color-300: var(--color-orange-300);
  --status-chip-color-400: var(--color-orange-400);
  --status-chip-color-500: var(--color-orange-500);
  --status-chip-color-600: var(--color-orange-600);
  --status-chip-color-800: var(--color-orange-800);
}
.status-chip-v2--amber {
  --status-chip-color-50: var(--color-amber-50);
  --status-chip-color-300: var(--color-amber-300);
  --status-chip-color-400: var(--color-amber-400);
  --status-chip-color-500: var(--color-amber-500);
  --status-chip-color-600: var(--color-amber-600);
  --status-chip-color-800: var(--color-amber-800);
}
.status-chip-v2--yellow {
  --status-chip-color-50: var(--color-yellow-50);
  --status-chip-color-300: var(--color-yellow-300);
  --status-chip-color-400: var(--color-yellow-400);
  --status-chip-color-500: var(--color-yellow-500);
  --status-chip-color-600: var(--color-yellow-600);
  --status-chip-color-800: var(--color-yellow-800);
}
.status-chip-v2--lime {
  --status-chip-color-50: var(--color-lime-50);
  --status-chip-color-300: var(--color-lime-300);
  --status-chip-color-400: var(--color-lime-400);
  --status-chip-color-500: var(--color-lime-500);
  --status-chip-color-600: var(--color-lime-600);
  --status-chip-color-800: var(--color-lime-800);
}
.status-chip-v2--green {
  --status-chip-color-50: var(--color-green-50);
  --status-chip-color-300: var(--color-green-300);
  --status-chip-color-400: var(--color-green-400);
  --status-chip-color-500: var(--color-green-500);
  --status-chip-color-600: var(--color-green-600);
  --status-chip-color-800: var(--color-green-800);
}
.status-chip-v2--emerald {
  --status-chip-color-50: var(--color-emerald-50);
  --status-chip-color-300: var(--color-emerald-300);
  --status-chip-color-400: var(--color-emerald-400);
  --status-chip-color-500: var(--color-emerald-500);
  --status-chip-color-600: var(--color-emerald-600);
  --status-chip-color-800: var(--color-emerald-800);
}
.status-chip-v2--teal {
  --status-chip-color-50: var(--color-teal-50);
  --status-chip-color-300: var(--color-teal-300);
  --status-chip-color-400: var(--color-teal-400);
  --status-chip-color-500: var(--color-teal-500);
  --status-chip-color-600: var(--color-teal-600);
  --status-chip-color-800: var(--color-teal-800);
}
.status-chip-v2--cyan {
  --status-chip-color-50: var(--color-cyan-50);
  --status-chip-color-300: var(--color-cyan-300);
  --status-chip-color-400: var(--color-cyan-400);
  --status-chip-color-500: var(--color-cyan-500);
  --status-chip-color-600: var(--color-cyan-600);
  --status-chip-color-800: var(--color-cyan-800);
}
.status-chip-v2--sky {
  --status-chip-color-50: var(--color-sky-50);
  --status-chip-color-300: var(--color-sky-300);
  --status-chip-color-400: var(--color-sky-400);
  --status-chip-color-500: var(--color-sky-500);
  --status-chip-color-600: var(--color-sky-600);
  --status-chip-color-800: var(--color-sky-800);
}
.status-chip-v2--blue {
  --status-chip-color-50: var(--color-blue-50);
  --status-chip-color-300: var(--color-blue-300);
  --status-chip-color-400: var(--color-blue-400);
  --status-chip-color-500: var(--color-blue-500);
  --status-chip-color-600: var(--color-blue-600);
  --status-chip-color-800: var(--color-blue-800);
}
.status-chip-v2--indigo {
  --status-chip-color-50: var(--color-indigo-50);
  --status-chip-color-300: var(--color-indigo-300);
  --status-chip-color-400: var(--color-indigo-400);
  --status-chip-color-500: var(--color-indigo-500);
  --status-chip-color-600: var(--color-indigo-600);
  --status-chip-color-800: var(--color-indigo-800);
}
.status-chip-v2--violet {
  --status-chip-color-50: var(--color-violet-50);
  --status-chip-color-300: var(--color-violet-300);
  --status-chip-color-400: var(--color-violet-400);
  --status-chip-color-500: var(--color-violet-500);
  --status-chip-color-600: var(--color-violet-600);
  --status-chip-color-800: var(--color-violet-800);
}
.status-chip-v2--purple {
  --status-chip-color-50: var(--color-purple-50);
  --status-chip-color-300: var(--color-purple-300);
  --status-chip-color-400: var(--color-purple-400);
  --status-chip-color-500: var(--color-purple-500);
  --status-chip-color-600: var(--color-purple-600);
  --status-chip-color-800: var(--color-purple-800);
}
.status-chip-v2--fuchsia {
  --status-chip-color-50: var(--color-fuchsia-50);
  --status-chip-color-300: var(--color-fuchsia-300);
  --status-chip-color-400: var(--color-fuchsia-400);
  --status-chip-color-500: var(--color-fuchsia-500);
  --status-chip-color-600: var(--color-fuchsia-600);
  --status-chip-color-800: var(--color-fuchsia-800);
}
.status-chip-v2--pink {
  --status-chip-color-50: var(--color-pink-50);
  --status-chip-color-300: var(--color-pink-300);
  --status-chip-color-400: var(--color-pink-400);
  --status-chip-color-500: var(--color-pink-500);
  --status-chip-color-600: var(--color-pink-600);
  --status-chip-color-800: var(--color-pink-800);
}
.status-chip-v2--rose {
  --status-chip-color-50: var(--color-rose-50);
  --status-chip-color-300: var(--color-rose-300);
  --status-chip-color-400: var(--color-rose-400);
  --status-chip-color-500: var(--color-rose-500);
  --status-chip-color-600: var(--color-rose-600);
  --status-chip-color-800: var(--color-rose-800);
}
