/**
 * Save Button
 *
 * Watch list / bookmark toggle button.
 * Inherits from .btn .btn--outline .btn--neutral by default.
 * The .is-saved class indicates the post is in the user's list.
 */

/* Wrapper provides positioning context for the flyout menu and toast. */
.save-button-wrapper {
	position: relative;
	display: inline-flex;
}

.save-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
	transition: background-color var(--transition-duration), color var(--transition-duration);
}

.save-button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Icon visibility — show outline by default, dots/menu icon when saved. */
.save-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.save-button__icon--outline {
	display: inline-flex;
}

.save-button__icon--saved {
	display: none;
}

.save-button.is-saved .save-button__icon--outline {
	display: none;
}

.save-button.is-saved .save-button__icon--saved {
	display: inline-flex;
}

/* Text label. */
.save-button__text {
	line-height: 1;
}

/* ============================================================
 * Flyout menu (appears below saved buttons on click)
 * ============================================================ */

.save-button__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	background-color: var(--white);
	border: 1px solid var(--neutral-light);
	border-radius: var(--radius-m);
	box-shadow: var(--box-shadow-xl);
	padding: 4px;
	z-index: 30;

	animation: save-button-menu-in 120ms ease;
}

@keyframes save-button-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.save-button__menu[hidden] {
	display: none;
}

.save-button__menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
	padding: var(--space-xs) var(--space-s);
	background: none;
	border: none;
	border-radius: var(--radius-s, 4px);
	color: var(--text-dark);
	font: inherit;
	font-size: var(--text-s);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition-duration);
}

.save-button__menu-item:hover,
.save-button__menu-item:focus-visible {
	background-color: var(--neutral-ultra-light);
	outline: none;
}

.save-button__menu-icon {
	flex-shrink: 0;
}

/* ============================================================
 * Toast confirmation (appears ABOVE the button after adding)
 *
 * Positioned above so it doesn't get clipped by the media's
 * overflow: hidden on cards. Also reads naturally on sermon pages.
 * ============================================================ */

.save-button__toast {
	position: absolute;
	bottom: calc(100% + 6px);
	right: 0;
	white-space: nowrap;
	padding: 6px 10px;
	background-color: var(--text-dark, #1a1a1a);
	color: var(--white);
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.2;
	border-radius: var(--radius-m);
	box-shadow: var(--box-shadow-m);
	z-index: 25;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.save-button__toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
 * Card removal animation (used on list pages)
 * ============================================================ */

article.is-removing {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 250ms ease, transform 250ms ease;
	pointer-events: none;
}