/**
 * Image Hotspot — Style 5: Plus Toggle
 *
 * Accent circles with a plus sign drawn in CSS that rotates into an X when
 * the tooltip opens — a clean interactive feel.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__num {
	display: none;
}

.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__marker {
	transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Plus sign drawn with pseudo elements ( only when no custom icon ). */
.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__marker:not( :has( .captwiki-hotspot__marker-icon ) )::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42%;
	height: 2.5px;
	margin: -1.25px 0 0 -21%;
	background: currentColor;
	border-radius: 2px;
}

.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__marker:not( :has( .captwiki-hotspot__marker-icon ) )::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.5px;
	height: 42%;
	margin: -21% 0 0 -1.25px;
	background: currentColor;
	border-radius: 2px;
}

.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__point:hover .captwiki-hotspot__marker,
.captwiki-hotspot.captwiki-style-5 .captwiki-hotspot__point.is-open .captwiki-hotspot__marker {
	transform: translate( -50%, -50% ) rotate( 45deg ) scale( 1.05 );
}

/* The pulse ring lives on ::after, which the CSS-drawn plus also uses —
   move the pulse onto the button itself for icon-less markers. */
.captwiki-hotspot--pulse.captwiki-style-5 .captwiki-hotspot__marker:not( :has( .captwiki-hotspot__marker-icon ) )::after {
	animation: none;
	box-shadow: none;
}

.captwiki-hotspot--pulse.captwiki-style-5 .captwiki-hotspot__marker:not( :has( .captwiki-hotspot__marker-icon ) ) {
	animation: captwiki-hs-pulse 2.2s ease-out infinite;
}
