/* Favorite List */

.fl-favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* The wrapper is exactly the size of the icon, so it scales around its own centre. */
.fl-favorite-btn .fl-icon-wrap {
	position: relative;
	display: inline-block;
	flex: none;
	margin: 0;
	padding: 0;
	line-height: 0;
	vertical-align: middle;
}

.fl-favorite-btn .fl-icon-wrap img {
	display: block;
	margin: 0;
	transform-origin: 50% 50%;
}

/* Gentle heart beat when added */
.fl-favorite-btn.fl-anim-beat .fl-icon-wrap img {
	animation: fl-heartbeat .8s ease-in-out;
}

@keyframes fl-heartbeat {
	0%   { transform: scale(1); }
	18%  { transform: scale(1.15); }
	36%  { transform: scale(1); }
	54%  { transform: scale(1.1); }
	80%  { transform: scale(1); }
	100% { transform: scale(1); }
}

/* Small shrink when removed */
.fl-favorite-btn.fl-anim-unbeat .fl-icon-wrap img {
	animation: fl-unbeat .3s ease-out;
}

@keyframes fl-unbeat {
	0%   { transform: scale(1); }
	45%  { transform: scale(.85); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.fl-favorite-btn .fl-icon-wrap img { animation: none !important; }
}

/* ---------- [favorite_list] ---------- */

.fl-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fl-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	transition: opacity .35s ease, transform .35s ease;
}

.fl-item.is-removing {
	opacity: 0;
	transform: translateX(20px);
}

.fl-item-thumb img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
}

.fl-item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fl-item-title {
	font-weight: 600;
	text-decoration: none;
}

.fl-item-date {
	font-size: .85em;
	opacity: .65;
}

.fl-item-remove {
	background: none;
	border: 0;
	padding: 6px;
	line-height: 0;
}

.fl-empty,
.fl-need-login {
	opacity: .8;
}