/* Small buff/debuff chip row shared by the hero's hotbar (LifeOrbs, placed
 * above the skills) and the enemy panel (TopMenuContext/Battle, placed
 * under the health bar). Mirrors the skill-tooltip's accent-colored "item
 * card" language (packages/ui/LifeOrbs/styles.css) for visual consistency. */
.buff-row {
	min-height: 1.75rem;
	flex-wrap: wrap;
}

.buff-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

/* Buff/debuff is a status, not a skill element -- the outline reads as
 * green (helping you) or red (hurting you) regardless of which element
 * (--accent) the underlying skill belongs to, so the two are unmistakable
 * apart at a glance in a mixed row. */
.buff-icon--buff {
	background: color-mix(in oklch, var(--color-success, #4ade80) 18%, var(--color-base-100));
	box-shadow: inset 0 0 0 1.5px var(--color-success, #4ade80);
}

.buff-icon--debuff {
	background: color-mix(in oklch, var(--color-error, #f87171) 18%, var(--color-base-100));
	box-shadow: inset 0 0 0 1.5px var(--color-error, #f87171);
}

/* Always-visible "next tick" amount (eg "+5" mana regen) -- previously only
 * shown inside the click-to-open tooltip, easy to miss/doubt the buff is
 * doing anything at a glance. */
.buff-icon__badge {
	position: absolute;
	bottom: -5px;
	right: -6px;
	padding: 0 4px;
	min-width: 1rem;
	height: 0.95rem;
	border-radius: 9999px;
	font-size: 0.55rem;
	font-weight: 800;
	line-height: 0.95rem;
	text-align: center;
	color: var(--color-success-content, #fff);
	background: var(--color-success, #2e7d32);
	box-shadow: 0 0 0 1.5px var(--color-base-100);
}

.buff-icon__badge--debuff {
	color: var(--color-error-content, #fff);
	background: var(--color-error, #f87171);
}

.buff-tooltip {
	padding: 8px 10px !important;
	border-color: color-mix(in oklch, var(--color-secondary) 35%, var(--color-base-300)) !important;
	white-space: nowrap;
}

.buff-tooltip__title {
	font-weight: 800;
	font-size: 0.82rem;
	margin-bottom: 4px;
}

.buff-tooltip__row {
	font-size: 0.72rem;
}

.buff-tooltip__row--muted {
	opacity: 0.65;
}