/**
 * Rotating Badge block styles (shared front-end + editor canvas).
 *
 * A circular badge: an SVG ring of repeated text spins around an optional
 * center icon chip. Zero frontend JS — rotation is pure CSS. Everything
 * configurable is driven by custom properties set on the block wrapper:
 *
 * --wpminty-rb-size        badge diameter (px)
 * --wpminty-rb-duration    seconds per full rotation
 * --wpminty-rb-direction   animation-direction (normal | reverse)
 * --wpminty-rb-icon-size   center chip diameter (% of badge)
 * --wpminty-rb-icon-glyph  center glyph diameter (% of chip)
 * --wpminty-rb-icon-color  center glyph color
 * --wpminty-rb-icon-bg     center chip background
 *
 * The ring text uses `fill: currentColor`, so core's text-color support
 * (color applied to the wrapper) drives it directly; the wrapper's own
 * background (border-radius 50%) is the badge face.
 */

.wp-block-wpminty-rotating-badge {

	/* Baseline mirror of the theme palette — keeps editor canvas and
	 * frontend identical (useBlockProps applies style defaults unreliably,
	 * while get_block_wrapper_attributes() would inline them on the
	 * frontend, so the defaults live here instead of block.json). Ring
	 * text + center icon inherit the Base color, the badge face is the
	 * Primary color. User-set inline styles from the panel always
	 * override this baseline. */
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	position: relative;
	display: grid;
	place-items: center;
	width: var(--wpminty-rb-size, 180px);
	aspect-ratio: 1;
	border-radius: 50%;
}

/* Optional wrapping link: fills the badge so the whole disc is clickable. */
.wp-block-wpminty-rotating-badge .wpminty-rb-anchor {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: inherit;
	border-radius: 50%;
	outline-offset: 4px;
}

/* Spinning ring: fills the badge face. The margin between the ring text
 * and the badge edge comes from the text path radius (35 inside the
 * 100-unit viewBox), not from insetting this box — shrinking the <svg>
 * would scale the glyphs down and risk clipping them against the
 * wrapper's circular overflow. `overflow: visible` keeps tall ascenders
 * painted even when they reach past the viewBox. */
.wpminty-rb-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: wpminty-rb-spin var(--wpminty-rb-duration, 12s) linear
		infinite;
	animation-direction: var(--wpminty-rb-direction, normal);
	pointer-events: none;
}

.wpminty-rb-ring text {
	fill: currentColor;
}

@keyframes wpminty-rb-spin {
	to {
		transform: rotate(1turn);
	}
}

/* Pause the spin while the badge is hovered (opt-in via attribute). */
.wp-block-wpminty-rotating-badge.is-hover-pause:hover .wpminty-rb-ring,
.wp-block-wpminty-rotating-badge.is-hover-pause:hover
	.wpminty-rb-core {
	animation-play-state: paused;
}

/* Center icon chip. Centering runs through absolute positioning plus auto
 * margins rather than the wrapper's grid: it holds no matter what the
 * editor canvas does to the wrapper's display, and it leaves `transform`
 * free for the rotation keyframes. */
.wpminty-rb-core {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	width: var(--wpminty-rb-icon-size, 50%);
	height: var(--wpminty-rb-icon-size, 50%);
	border-radius: 50%;
	color: var(--wpminty-rb-icon-color, currentColor);
	background: var(--wpminty-rb-icon-bg, var(--wp--preset--color--contrast));
	text-align: center;
}

.wpminty-rb-core svg {
	width: var(--wpminty-rb-icon-glyph, 56%);
	height: var(--wpminty-rb-icon-glyph, 56%);
	fill: currentColor;
}

/* The chip spins with the ring when iconRotates is enabled. */
.wp-block-wpminty-rotating-badge.is-icon-rotating .wpminty-rb-core {
	animation: wpminty-rb-spin var(--wpminty-rb-duration, 12s) linear
		infinite;
	animation-direction: var(--wpminty-rb-direction, normal);
}

/* ---------------------------------------------------------------------------
 * Editor affordances
 * ------------------------------------------------------------------------- */

/* Paused while selected so the text is easy to read/edit… */
.wp-block-wpminty-rotating-badge.is-selected .wpminty-rb-ring,
.wp-block-wpminty-rotating-badge.is-selected .wpminty-rb-core {
	animation-play-state: paused;
}

/* …unless the "Preview animation" toggle forces playback. The rule is
 * source-ordered after `.is-selected` above and shares its specificity,
 * so the later rule wins without needing !important. */
.wp-block-wpminty-rotating-badge.is-previewing .wpminty-rb-ring,
.wp-block-wpminty-rotating-badge.is-previewing .wpminty-rb-core {
	animation-play-state: running;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-wpminty-rotating-badge .wpminty-rb-ring,
	.wp-block-wpminty-rotating-badge .wpminty-rb-core {
		animation: none;
	}
}

/* Honor the project-wide no-motion override (see animation.css). */
.wpminty-no-motion .wpminty-rb-ring,
.wpminty-no-motion .wpminty-rb-core {
	animation: none;
}