/*
 * Breaking news banner.
 *
 * Deliberately minimal. Color, spacing, typography and full-width alignment
 * all come from core block supports, so they are not repeated here. These
 * rules cover only what core has no support for: showing one headline at a
 * time when several stories are breaking at once.
 */

/*
 * No padding rule here on purpose. Spacing is set on the block, via Mai's
 * has-*-padding-* utility classes in the Advanced panel. A default here would
 * only fight those classes on specificity and source order.
 *
 * Note that core's spacing presets do not work on this site: it is a classic
 * theme with no theme.json, so --wp--preset--spacing--* is defined nowhere
 * and anything referencing it collapses to nothing.
 */

/*
 * The headlines stack in one cell, so the bar is as tall as the tallest of
 * them and never changes height as it cycles. Inline so it sits on the same
 * line as the label, which does not cycle. Its width is the widest headline,
 * so the line does not jump around either.
 */
.eurweb-breaking__items {
	display: inline-grid;
	vertical-align: top;
	text-align: left;
}

.eurweb-breaking__item {
	grid-area: 1 / 1;
	color: inherit;
}

/* A single headline does not cycle, so it is left alone entirely. */
.eurweb-breaking__items:not(.has-1) .eurweb-breaking__item {
	opacity: 0;
	animation-duration: var(--cycle);
	animation-iteration-count: infinite;
	animation-delay: calc(var(--cycle) / var(--n) * var(--i));
}

/*
 * Each headline is visible for its share of the cycle. The share depends on
 * how many there are, and keyframe percentages cannot be calculated, so there
 * is one set per count. The block caps the count at five.
 */
.has-2 .eurweb-breaking__item { animation-name: eurweb-breaking-2; }
.has-3 .eurweb-breaking__item { animation-name: eurweb-breaking-3; }
.has-4 .eurweb-breaking__item { animation-name: eurweb-breaking-4; }
.has-5 .eurweb-breaking__item { animation-name: eurweb-breaking-5; }

@keyframes eurweb-breaking-2 { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes eurweb-breaking-3 { 0%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes eurweb-breaking-4 { 0%, 20% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes eurweb-breaking-5 { 0%, 15% { opacity: 1; } 20%, 100% { opacity: 0; } }

/* No cycling for anyone who has asked for less motion. Show the newest story
   and leave it there, rather than showing nothing. */
@media (prefers-reduced-motion: reduce) {
	.eurweb-breaking__items:not(.has-1) .eurweb-breaking__item {
		animation: none;
	}

	.eurweb-breaking__items:not(.has-1) .eurweb-breaking__item:first-child {
		opacity: 1;
	}
}

/* The expiry script sets this. Stated explicitly so no later rule that gives
   the banner a display value can leave an expired bar on screen. */
.eurweb-breaking[hidden] {
	display: none;
}

/*
 * Editor-only placeholder. The front end renders nothing when no story is
 * breaking, but an empty block in the editor cannot be told apart from no
 * block at all, so there it explains itself instead.
 */
.eurweb-breaking-placeholder {
	padding: 0.75rem 1rem;
	border: 1px dashed currentColor;
	border-radius: 2px;
	opacity: 0.65;
	font-size: 0.875rem;
	text-align: center;
}