/*
 * Album status label on post card covers. Carries its own dark background so it
 * reads on any photo in either theme. It sits flush in the bottom-left corner,
 * or directly above the category label when SmartMag puts that there.
 */
.xy-album-status {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 6px 10px 6px 9px;
	border-radius: 5px;
	background: rgb(10 10 16 / 74%);
	backdrop-filter: blur(8px) saturate(140%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
	color: #fff;
	font: 600 12px/1.1 var(--ui-font, Outfit, system-ui, sans-serif);
	letter-spacing: normal;
	text-transform: none;
	pointer-events: none;
}

/* The category label is 26px tall; leave a 4px gap above it. */
.cat-labels.p-bot-left + .xy-album-status {
	bottom: 30px;
}

.xy-album-status-dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffb020;
}

.xy-album-status.is-processing .xy-album-status-dot {
	animation: xy-album-status-pulse 1.8s ease-out infinite;
}

.xy-album-status.is-updated .xy-album-status-dot {
	background: #ff3d8b;
}

@keyframes xy-album-status-pulse {
	0% {
		box-shadow: 0 0 0 0 rgb(255 176 32 / 65%);
	}

	80%,
	100% {
		box-shadow: 0 0 0 7px rgb(255 176 32 / 0%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xy-album-status.is-processing .xy-album-status-dot {
		animation: none;
	}
}