.pixel-post-count {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	max-width: 100%;
}

.pixel-post-count__prefix,
.pixel-post-count__number,
.pixel-post-count__suffix {
	display: inline-block;
	min-width: 0;
}

.pixel-post-count[hidden],
.pixel-post-count [hidden] {
	display: none !important;
}

.pixel-post-count__number {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pixel-post-count--break-number,
.pixel-post-count--break-prefix,
.pixel-post-count--break-suffix {
	flex-wrap: wrap;
}

.pixel-post-count--break-number .pixel-post-count__prefix,
.pixel-post-count--break-prefix .pixel-post-count__prefix {
	flex-basis: 100%;
}

.pixel-post-count--break-suffix .pixel-post-count__suffix {
	flex-basis: 100%;
}

.pixel-post-count--break-stack {
	flex-direction: column;
	align-items: inherit;
	gap: .15em;
}

.pixel-post-count.is-animating .pixel-post-count__number {
	will-change: contents, opacity, transform;
}

.pixel-post-count.is-fading .pixel-post-count__number {
	animation: pixel-post-count-fade var(--pixel-post-count-duration, 800ms) ease both;
}

.pixel-post-count__inspector,
.pixel-post-count__editor-notice {
	box-sizing: border-box;
	margin: .75rem 0 0;
	padding: .75rem;
	border: 1px dashed currentColor;
	font: 12px/1.5 monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

@keyframes pixel-post-count-fade {
	0% { opacity: 0; transform: translateY(.2em); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pixel-post-count.is-fading .pixel-post-count__number {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.pixel-post-count[data-break-tablet="single"],
	.pixel-post-count[data-break-tablet="number"],
	.pixel-post-count[data-break-tablet="prefix"],
	.pixel-post-count[data-break-tablet="suffix"] {
		flex-direction: row;
	}

	.pixel-post-count[data-break-tablet="single"] {
		flex-wrap: nowrap;
	}

	.pixel-post-count[data-break-tablet="single"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-tablet="single"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-tablet="number"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-tablet="prefix"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-tablet="suffix"] .pixel-post-count__prefix {
		flex-basis: auto;
	}

	.pixel-post-count[data-break-tablet="number"],
	.pixel-post-count[data-break-tablet="prefix"],
	.pixel-post-count[data-break-tablet="suffix"] {
		flex-wrap: wrap;
	}

	.pixel-post-count[data-break-tablet="number"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-tablet="prefix"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-tablet="suffix"] .pixel-post-count__suffix {
		flex-basis: 100%;
	}

	.pixel-post-count[data-break-tablet="stack"] {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

@media (max-width: 767px) {
	.pixel-post-count[data-break-mobile="single"],
	.pixel-post-count[data-break-mobile="number"],
	.pixel-post-count[data-break-mobile="prefix"],
	.pixel-post-count[data-break-mobile="suffix"] {
		flex-direction: row;
	}

	.pixel-post-count[data-break-mobile="single"] {
		flex-wrap: nowrap;
	}

	.pixel-post-count[data-break-mobile="single"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-mobile="single"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-mobile="number"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-mobile="prefix"] .pixel-post-count__suffix,
	.pixel-post-count[data-break-mobile="suffix"] .pixel-post-count__prefix {
		flex-basis: auto;
	}

	.pixel-post-count[data-break-mobile="number"],
	.pixel-post-count[data-break-mobile="prefix"],
	.pixel-post-count[data-break-mobile="suffix"] {
		flex-wrap: wrap;
	}

	.pixel-post-count[data-break-mobile="number"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-mobile="prefix"] .pixel-post-count__prefix,
	.pixel-post-count[data-break-mobile="suffix"] .pixel-post-count__suffix {
		flex-basis: 100%;
	}

	.pixel-post-count[data-break-mobile="stack"] {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}