.ts-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff7f0;
	color: #ff5f01;
	width: max-content;
}

.ts-badge--inline .ts-badge-text {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.ts-badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ts-badge-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ts-badge-value {
	font-size: 16px;
	font-weight: 700;
}

.ts-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	width: 12px;
	height: 12px;
	color: #ff5f01;
}

.ts-badge--pulse .ts-badge-icon {
	animation: ts-badge-pulse 1.5s infinite;
}

.ts-badge--icon-top {
	flex-direction: column;
	align-items: center;
}

.ts-badge--icon-right {
	flex-direction: row-reverse;
}

.ts-badge--icon-bottom {
	flex-direction: column-reverse;
	align-items: center;
}

.ts-attn--shimmer {
	position: relative;
	overflow: hidden;
}

.ts-attn--shimmer::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, color-mix(in srgb, var(--ts-badge-attn-shimmer-color, #ffffff) 0%, transparent) 0%, color-mix(in srgb, var(--ts-badge-attn-shimmer-color, #ffffff) 30%, transparent) 40%, color-mix(in srgb, var(--ts-badge-attn-shimmer-color, #ffffff) 0%, transparent) 70%);
	animation: ts-badge-shimmer 2s linear infinite;
}

.ts-attn--pulse {
	animation: ts-badge-attn-pulse 2s ease-in-out infinite;
}

@keyframes ts-badge-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--ts-badge-pulse-color, #ff5f01) 50%, transparent);
	}
	70% {
		box-shadow: 0 0 0 8px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@keyframes ts-badge-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes ts-badge-attn-pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ts-badge-attn-pulse-color, #ff5f01) 18%, transparent); }
	50% { transform: scale(1.02); box-shadow: 0 0 0 12px transparent; }
	100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}