/* ==========================================================================
   Save News — the button, and the reader's list

   Defaults only. Everything here is either inherited or overridden by the
   widgets' Style tabs, so the button looks right before anyone opens them.
   ========================================================================== */

.arena-save-wrap {
	display: flex;
	flex-direction: column;
}

.arena-save {
	--arena-save-speed: .18s;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition:
		color var(--arena-save-speed) ease,
		background-color var(--arena-save-speed) ease,
		border-color var(--arena-save-speed) ease;
}

.arena-save:hover {
	color: var(--arena-accent, #c8102e);
}

.arena-save__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1;
}

.arena-save__icon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

/* Two icons are printed and the state picks one, so the correct icon is
   already in the HTML rather than swapped in after the first paint. */
.arena-save__icon--saved {
	display: none;
}

.arena-save.is-saved .arena-save__icon--default {
	display: none;
}

.arena-save.is-saved .arena-save__icon--saved {
	display: inline-flex;
}

/* The saved state reads as "done", not as an accent the eye chases. */
.arena-save.is-saved {
	color: var(--arena-accent, #c8102e);
}

/* Until the script has run, a button whose state came from the server is
   already right; one waiting on localStorage is not. Keeping the press
   target steady avoids the label jumping width when it settles. */
.arena-save__label {
	white-space: nowrap;
}

/* ── The list ───────────────────────────────────────────────────────── */

.arena-saved__message {
	margin: 0;
	color: var(--arena-ink-soft, #5b6472);
}

.arena-saved__message:empty {
	display: none;
}