/**
 * Counter block styles (shared front-end + editor canvas).
 *
 * The block wrapper drives layout via core's layout support and CSS custom
 * properties for per-element colors and sizes. Per-element typography is
 * emitted as inline styles on the text elements themselves, so that an h1-h6
 * title keeps inheriting the theme's heading styles until overridden. Number
 * animation is handled by the separate view.js bundle.
 */

.wp-block-wpminty-counter {
	--wpminty-counter-icon-size: 48px;
	--wpminty-counter-icon-padding: 16px;
	--wpminty-counter-icon-radius: 50%;
	--wpminty-counter-icon-color: currentColor;
	--wpminty-counter-icon-bg: transparent;
	--wpminty-counter-icon-hover-color: var(--wpminty-counter-icon-color);
	--wpminty-counter-icon-hover-bg: var(--wpminty-counter-icon-bg);
	--wpminty-counter-icon-border-width: 0;
	--wpminty-counter-icon-border-style: solid;
	--wpminty-counter-icon-border-color: currentColor;
	--wpminty-counter-icon-hover-border-color: var(--wpminty-counter-icon-border-color);
	--wpminty-counter-item-border-width: 0;
	--wpminty-counter-item-border-style: solid;
	--wpminty-counter-item-border-color: currentColor;
	--wpminty-counter-item-border-radius: 0;
	--wpminty-counter-item-padding: 0;
	--wpminty-counter-divider-width: 1px;
	--wpminty-counter-divider-style: solid;
	--wpminty-counter-divider-color: currentColor;
}

/* Core layout support owns the container display mode, gap and wrapping: the
 * generated is-layout-* classes and the .wp-container-* rules are the single
 * source of truth on both the front end and the editor canvas, so nothing is
 * hardcoded here. */

.wpminty-counter__item {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--wpminty-counter-item-padding);
	border: var(--wpminty-counter-item-border-width) var(--wpminty-counter-item-border-style) var(--wpminty-counter-item-border-color);
	border-radius: var(--wpminty-counter-item-border-radius);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.wpminty-counter__link {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.wp-block-wpminty-counter.is-halign-left .wpminty-counter__item,
.wp-block-wpminty-counter.is-halign-left .wpminty-counter__link {
	justify-content: flex-start;
	text-align: left;
}

.wp-block-wpminty-counter.is-halign-center .wpminty-counter__item,
.wp-block-wpminty-counter.is-halign-center .wpminty-counter__link {
	justify-content: center;
	text-align: center;
}

.wp-block-wpminty-counter.is-halign-right .wpminty-counter__item,
.wp-block-wpminty-counter.is-halign-right .wpminty-counter__link {
	justify-content: flex-end;
	text-align: right;
}

.wp-block-wpminty-counter.is-valign-top .wpminty-counter__item,
.wp-block-wpminty-counter.is-valign-top .wpminty-counter__link {
	align-items: flex-start;
}

.wp-block-wpminty-counter.is-valign-center .wpminty-counter__item,
.wp-block-wpminty-counter.is-valign-center .wpminty-counter__link {
	align-items: center;
}

.wp-block-wpminty-counter.is-valign-bottom .wpminty-counter__item,
.wp-block-wpminty-counter.is-valign-bottom .wpminty-counter__link {
	align-items: flex-end;
}

.wpminty-counter__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wpminty-counter-icon-size);
	height: var(--wpminty-counter-icon-size);
	padding: var(--wpminty-counter-icon-padding);
	color: var(--wpminty-counter-icon-color);
	background: var(--wpminty-counter-icon-bg);
	border: var(--wpminty-counter-icon-border-width) var(--wpminty-counter-icon-border-style) var(--wpminty-counter-icon-border-color);
	border-radius: var(--wpminty-counter-icon-radius);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wpminty-counter__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.wpminty-counter__item:hover .wpminty-counter__icon,
.wpminty-counter__link:hover .wpminty-counter__icon,
.wpminty-counter__link:focus .wpminty-counter__icon {
	color: var(--wpminty-counter-icon-hover-color);
	background: var(--wpminty-counter-icon-hover-bg);
	border-color: var(--wpminty-counter-icon-hover-border-color);
}

.wpminty-counter__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpminty-counter__value {
	display: inline-flex;
	align-items: baseline;
	justify-content: inherit;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wpminty-counter__number {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.wpminty-counter__prefix,
.wpminty-counter__suffix {
	font-size: 1rem;
	line-height: 1;
}

/* No typography here on purpose. When the title is rendered as h1-h6 it must
 * pick up the theme's heading styles (`:root :where(h2)` and friends), so the
 * block only owns the spacing below the number; user overrides arrive as
 * inline styles on the element itself. */
.wp-block-wpminty-counter .wpminty-counter__title {
	margin-top: var(--wpminty-counter-title-margin-top, 0.5rem);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Line dividers between items
 *
 * The line is painted by the item pseudo-elements in the middle of the layout
 * gap, so it works for any layout type and any number of rows or columns.
 * Lines that would hang outside the first column or the first row are cut off
 * by clipping the container at its content box.
 * ------------------------------------------------------------------------- */
.wp-block-wpminty-counter.has-dividers {
	/* Mirrors core's own gap fallbacks; overridden inline when blockGap is set. */
	--wpminty-counter-divider-gap-x: var(--wp--style--block-gap, 0.5em);
	--wpminty-counter-divider-gap-y: var(--wp--style--block-gap, 0.5em);
	overflow: clip;
	overflow-clip-margin: content-box;
}

.wp-block-wpminty-counter.has-dividers.is-layout-grid {
	--wpminty-counter-divider-gap-x: var(--wp--style--block-gap, 1.2rem);
	--wpminty-counter-divider-gap-y: var(--wp--style--block-gap, 1.2rem);
}

.wp-block-wpminty-counter.has-dividers .wpminty-counter__item::before,
.wp-block-wpminty-counter.has-dividers .wpminty-counter__item::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border: 0 var(--wpminty-counter-divider-style) var(--wpminty-counter-divider-color);
}

/* Column divider, extended into the row gaps so grid lines meet cleanly. */
.wp-block-wpminty-counter.has-dividers .wpminty-counter__item::before {
	inset-block: calc(-1 * var(--wpminty-counter-divider-gap-y) / 2);
	inset-inline-start: calc(-1 * var(--wpminty-counter-divider-gap-x) / 2);
	border-inline-start-width: var(--wpminty-counter-divider-width);
}

/* Row divider. */
.wp-block-wpminty-counter.has-dividers .wpminty-counter__item::after {
	inset-inline: calc(-1 * var(--wpminty-counter-divider-gap-x) / 2);
	inset-block-start: calc(-1 * var(--wpminty-counter-divider-gap-y) / 2);
	border-block-start-width: var(--wpminty-counter-divider-width);
}

.wp-block-wpminty-counter.is-icon-top .wpminty-counter__item,
.wp-block-wpminty-counter.is-icon-top .wpminty-counter__link {
	flex-direction: column;
	align-items: center;
}

.wp-block-wpminty-counter.is-icon-top .wpminty-counter__icon {
	margin-bottom: 0.75rem;
}

.wp-block-wpminty-counter.is-icon-top .wpminty-counter__body {
	align-items: center;
	text-align: center;
}

.wp-block-wpminty-counter.is-icon-left .wpminty-counter__item,
.wp-block-wpminty-counter.is-icon-left .wpminty-counter__link {
	flex-direction: row;
	gap: 1rem;
}

.wp-block-wpminty-counter.is-icon-left.is-halign-right .wpminty-counter__item,
.wp-block-wpminty-counter.is-icon-left.is-halign-right .wpminty-counter__link {
	flex-direction: row-reverse;
}

.wp-block-wpminty-counter.is-icon-left .wpminty-counter__body {
	align-items: flex-start;
	text-align: left;
}

.wp-block-wpminty-counter.is-icon-right .wpminty-counter__item,
.wp-block-wpminty-counter.is-icon-right .wpminty-counter__link {
	flex-direction: row-reverse;
	gap: 1rem;
}

.wp-block-wpminty-counter.is-icon-right.is-halign-right .wpminty-counter__item,
.wp-block-wpminty-counter.is-icon-right.is-halign-right .wpminty-counter__link {
	flex-direction: row;
}

.wp-block-wpminty-counter.is-icon-right .wpminty-counter__body {
	align-items: flex-end;
	text-align: right;
}

@keyframes wpminty-counter-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes wpminty-counter-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

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

@keyframes wpminty-counter-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.wp-block-wpminty-counter.is-icon-animation-pulse .wpminty-counter__item:hover .wpminty-counter__icon {
	animation: wpminty-counter-pulse 1s ease-in-out infinite;
}

.wp-block-wpminty-counter.is-icon-animation-bounce .wpminty-counter__item:hover .wpminty-counter__icon {
	animation: wpminty-counter-bounce 0.8s ease-in-out infinite;
}

.wp-block-wpminty-counter.is-icon-animation-rotate .wpminty-counter__item:hover .wpminty-counter__icon {
	animation: wpminty-counter-rotate 1.2s linear infinite;
}

.wp-block-wpminty-counter.is-icon-animation-shake .wpminty-counter__item:hover .wpminty-counter__icon {
	animation: wpminty-counter-shake 0.6s ease-in-out infinite;
}

@media (max-width: 600px) {
	.wp-block-wpminty-counter.is-icon-left .wpminty-counter__item,
	.wp-block-wpminty-counter.is-icon-left .wpminty-counter__link,
	.wp-block-wpminty-counter.is-icon-right .wpminty-counter__item,
	.wp-block-wpminty-counter.is-icon-right .wpminty-counter__link {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	.wp-block-wpminty-counter.is-icon-left .wpminty-counter__body,
	.wp-block-wpminty-counter.is-icon-right .wpminty-counter__body {
		align-items: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpminty-counter__icon {
		animation: none !important;
		transition: none;
	}
}

.wpminty-no-motion .wpminty-counter__icon {
	animation: none !important;
	transition: none;
}