.badge{height:20px;font:var(--text-button-12);white-space:nowrap;border-radius:9999px;align-items:center;gap:4px;padding:0 8px;display:inline-flex}.badge-logo{object-fit:contain;background:var(--accent-contrast);border-radius:2px;flex-shrink:0;width:14px;height:14px}.badge--brand .badge-logo{background:0 0;border-radius:0}.badge--gray{background:var(--ds-gray-200);color:var(--ds-gray-1000);padding:12px 8px}.badge--blue{background:color-mix(in srgb, var(--ds-blue-700) 14%, transparent);color:var(--ds-blue-900)}.badge--green{background:color-mix(in srgb, var(--ds-green-700) 16%, transparent);color:var(--ds-green-700);padding:10px}.badge--amber{background:color-mix(in srgb, var(--ds-amber-700) 18%, transparent);color:color-mix(in srgb, var(--ds-amber-700) 60%, var(--ds-gray-1000))}.badge--brand{background:color-mix(in srgb, var(--badge-brand) 7%, var(--ds-background-100));color:var(--ds-gray-1000);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--badge-brand) 24%, transparent);padding:12px 10px 12px 5px}.badge--link{cursor:pointer;transition:background-color var(--duration-fast) ease;text-decoration:none}.badge--brand.badge--link:hover{background:color-mix(in srgb, var(--badge-brand) 15%, var(--ds-background-100))}.badge--link:focus-visible{box-shadow:var(--ds-focus-ring);outline:none}
