:root {
	--revo-info-active-bg: #3b82f6;
	--revo-info-active-text: #fff;
	--revo-info-active-border: #2a59c1;
	--revo-info-active-glow: #facc15;
	--revo-info-active-glow-soft: rgba(250, 204, 21, 0.72);
}

/*
 * Keep every public Info button styled as Secondary in Breakdance.
 * JavaScript adds .revo-info-active only to the live item. The declarations
 * below intentionally use !important to override Breakdance's global
 * Secondary button colors only while that item is active.
 */
.revo-info-item.revo-info-active {
	position: relative;
	z-index: 5;
}

/*
 * Breakdance can place the custom class on the Button wrapper while the visual
 * button is a nested link. The explicit selectors also cover a direct link or
 * button without relying on newer selector syntax.
 */
a.revo-info-item.revo-info-active,
button.revo-info-item.revo-info-active,
.revo-info-item.revo-info-active a,
.revo-info-item.revo-info-active button,
a.revo-info-item.revo-info-active:hover,
button.revo-info-item.revo-info-active:hover,
.revo-info-item.revo-info-active a:hover,
.revo-info-item.revo-info-active button:hover,
a.revo-info-item.revo-info-active:focus,
button.revo-info-item.revo-info-active:focus,
.revo-info-item.revo-info-active a:focus,
.revo-info-item.revo-info-active button:focus {
	position: relative;
	z-index: 5;
	background-color: var(--revo-info-active-bg) !important;
	border-color: var(--revo-info-active-border) !important;
	box-shadow:
		0 0 0 4px var(--revo-info-active-glow),
		0 0 20px 4px var(--revo-info-active-glow-soft) !important;
	color: var(--revo-info-active-text) !important;
}

/* Breakdance may style button text and icons on nested elements. */
a.revo-info-item.revo-info-active *,
button.revo-info-item.revo-info-active *,
.revo-info-item.revo-info-active a *,
.revo-info-item.revo-info-active button * {
	color: var(--revo-info-active-text) !important;
}