/* ==========================================================================
   Bubble Button – Hintergrund fällt auf das Icon zusammen
   ========================================================================== */

.buttonwrap {
	position: relative;
	overflow: visible;
}

.bubble-button.is-bubble-ready {
	--bubble-button-background:
		var(--brand-color-mirage, #111826);

	--bubble-button-foreground:
		var(--bs-white, #fff);

	--bubble-button-text-inverted:
		var(--brand-color-mirage, #111826);

	position: relative;
	isolation: isolate;

	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.6rem;

	overflow: visible;

	color: var(--bubble-button-foreground) !important;
	background: transparent !important;
	border-color: transparent !important;

	white-space: nowrap;
}

.bubble-button.is-bubble-ready .bubble-button__bubble {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0;

	display: block;

	background-color: var(--bubble-button-background);
	border-radius: 999px;

	pointer-events: none;

	will-change:
		width,
		height,
		transform;
}

.bubble-button.is-bubble-ready > span:not(.bubble-button__bubble) {
	position: relative;
	z-index: 2;

	display: inline-block;

	color: var(--bubble-button-foreground);

	pointer-events: none;

	will-change:
		color,
		filter;
}

.bubble-button.is-bubble-ready > i,
.bubble-button.is-bubble-ready > svg {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 3;

	display: block;

	color: var(--bubble-button-foreground);

	transform-origin: center center;

	will-change: transform;
}

.bubble-button.is-bubble-ready:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bubble-button.is-bubble-ready {
		background-color:
			var(--bubble-button-background) !important;

		border-color:
			var(--bubble-button-background) !important;
	}

	.bubble-button.is-bubble-ready .bubble-button__bubble {
		display: none;
	}

	.bubble-button.is-bubble-ready > i,
	.bubble-button.is-bubble-ready > svg {
		position: static;

		transform: none !important;
	}
}