/* Article reactions: the date-line pill and its tray of faces. */

.xy-reactions {
	--xy-reactions-ink: var(--c-main, #3c3fde);
	--xy-reactions-tint: rgb(60 63 222 / 7%);
	--xy-reactions-tint-strong: rgb(60 63 222 / 13%);
	--xy-reactions-line: rgb(60 63 222 / 20%);
	--xy-reactions-fill: var(--xy-reactions-tint-strong);
	--xy-reactions-surface: #fff;
	--xy-reactions-page: #fff;
	--xy-reactions-text: #474747;
	--xy-reactions-shadow: 0 8px 24px -6px rgb(0 0 0 / 22%), 0 0 0 1px rgb(0 0 0 / 5%);
	--xy-reactions-like: var(--c-main, #3c3fde);
	--xy-reactions-love: #d4055e;
	--xy-reactions-warm: #a35400;

	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.s-dark .xy-reactions,
.site-s-dark .xy-reactions {
	--xy-reactions-bubble-edge: 0 0 0 1px rgb(255 255 255 / 14%);
	--xy-reactions-ink: #a3a5ff;
	--xy-reactions-tint: rgb(163 165 255 / 10%);
	--xy-reactions-tint-strong: rgb(163 165 255 / 18%);
	--xy-reactions-line: rgb(163 165 255 / 28%);
	--xy-reactions-surface: #1d1d27;
	--xy-reactions-page: #101016;
	--xy-reactions-text: #c4c4cc;
	--xy-reactions-shadow: 0 8px 24px -6px rgb(0 0 0 / 75%), 0 0 0 1px rgb(255 255 255 / 10%);
	--xy-reactions-like: #a3a5ff;
	--xy-reactions-love: #ff6aa6;
	--xy-reactions-warm: #ffb547;
}

.xy-reactions[data-mine="like"] {
	--xy-reactions-color: var(--xy-reactions-like);
}

.xy-reactions[data-mine="love"] {
	--xy-reactions-color: var(--xy-reactions-love);
}

.xy-reactions[data-mine="care"],
.xy-reactions[data-mine="wow"] {
	--xy-reactions-color: var(--xy-reactions-warm);
}

.xy-reactions[data-mine] {
	--xy-reactions-fill: color-mix(in srgb, var(--xy-reactions-color) 12%, transparent);
}

/* Pill */

.xy-reactions-pill {
	position: relative;
	display: inline-flex;
	gap: 5px;
	align-items: center;
	height: 24px;
	margin: 0;
	padding: 0 8px 0 3px;
	border: 1px solid var(--xy-reactions-line);
	border-radius: 999px;
	background: linear-gradient(var(--xy-reactions-fill), var(--xy-reactions-fill)) no-repeat 0 0 / 0% 100%, var(--xy-reactions-tint);
	box-shadow: none;
	color: var(--xy-reactions-text);
	font: 600 12px/1 var(--ui-font, inherit);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-size 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* Extend the tap area to 44px without changing the pill's size. */
.xy-reactions-pill::after {
	position: absolute;
	inset: -10px -4px;
	content: "";
}

.xy-reactions-pill:hover,
.xy-reactions-pill:focus-visible {
	border-color: var(--xy-reactions-ink);
	background-size: 100% 100%, auto;
	box-shadow: 0 4px 10px -6px rgb(60 63 222 / 55%);
	transform: translateY(-1px);
}

.xy-reactions-pill:focus-visible {
	outline: 2px solid var(--xy-reactions-ink);
	outline-offset: 2px;
}

.xy-reactions-pill:active {
	box-shadow: none;
	transform: scale(0.95);
}

.xy-reactions[data-mine] .xy-reactions-pill {
	border-color: var(--xy-reactions-color);
	background-color: var(--xy-reactions-fill);
	box-shadow: none;
	color: var(--xy-reactions-color);
}

.xy-reactions-faces {
	display: flex;
}

.xy-reactions-face {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 0 0 -3px;
	transition: margin 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.xy-reactions-face:first-child {
	margin-left: 0;
}

/* Touch keeps :hover after a tap, so the faces spread only where a pointer can hover;
 * the wider pill would otherwise wrap on a full phone date line. */
@media (hover: hover) {
	.xy-reactions-pill:hover .xy-reactions-face {
		margin-left: 1px;
	}

	.xy-reactions-pill:hover .xy-reactions-face:first-child {
		margin-left: 0;
	}
}

.xy-reactions-seat {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: -2px;
	border: 1.25px dashed var(--xy-reactions-ink);
	border-radius: 50%;
	background: var(--xy-reactions-page);
	color: var(--xy-reactions-ink);
	font: 700 11px/1 var(--ui-font, inherit);
	transition: transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.xy-reactions-faces:empty + .xy-reactions-seat {
	margin-left: 0;
}

.xy-reactions-pill:hover .xy-reactions-seat {
	border-style: solid;
	transform: rotate(90deg) scale(1.12);
}

.xy-reactions[data-mine] .xy-reactions-seat {
	padding: 1px;
	border: 0;
	background: transparent;
	box-shadow: 0 0 0 1.25px var(--xy-reactions-color);
}

.xy-reactions[data-mine] .xy-reactions-pill:hover .xy-reactions-seat {
	transform: scale(1.1);
}

/* The reader's reaction is already one of the faces: ring that face instead of the seat. */
.xy-reactions-seat[hidden] {
	display: none;
}

.xy-reactions-pill .xy-reactions-face.is-mine {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	margin-right: 3px;
	margin-left: 2px;
	padding: 1px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.25px var(--xy-reactions-color);
}

.xy-reactions-pill .xy-reactions-face.is-mine:first-child {
	margin-left: 1px;
}

.xy-reactions-pill .xy-reactions-face.is-mine:last-child {
	margin-right: 1px;
}

.xy-reactions-seat-face {
	display: block;
	width: 100%;
	height: 100%;
}

.xy-reactions-total {
	display: inline-block;
}

/* Press and hold on touch screens */
.xy-reactions-pill.is-holding {
	background-size: 100% 100%, auto;
	transform: scale(0.94);
	transition: background-size 0.35s linear, transform 0.35s ease-out;
}

.xy-reactions-pill.is-armed {
	border-color: var(--xy-reactions-ink);
	background-size: 100% 100%, auto;
	transform: scale(0.94);
}

/* Tray */

.xy-reactions-tray {
	position: absolute;
	top: calc(100% + 8px);
	left: -6px;
	z-index: 30;
	display: flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--xy-reactions-surface);
	box-shadow: var(--xy-reactions-shadow);
	visibility: hidden;
	opacity: 0;
	transform: translate(var(--xy-reactions-shift, 0), 0);
	transition: opacity 0.12s, visibility 0s 0.12s;
}

.xy-reactions.is-open .xy-reactions-tray {
	visibility: visible;
	opacity: 1;

	/* Every choice is visible and clickable on the first frame. */
	transition: none;
}

/* Keep the pointer inside the tray while crossing the gap below the pill. */
.xy-reactions-tray::before {
	position: absolute;
	inset: -10px 0 100%;
	content: "";
}

.xy-reactions-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	/* The theme transitions all button properties, which would delay the inherited visibility. */
	transition: none;
}

.xy-reactions-option:focus-visible {
	outline: none;
}

.xy-reactions-option[data-reaction="like"] {
	--xy-reactions-color: var(--xy-reactions-like);
}

.xy-reactions-option[data-reaction="love"] {
	--xy-reactions-color: var(--xy-reactions-love);
}

.xy-reactions-option[data-reaction="care"],
.xy-reactions-option[data-reaction="wow"] {
	--xy-reactions-color: var(--xy-reactions-warm);
}

.xy-reactions-option-face {
	display: block;
	width: 30px;
	height: 30px;
	pointer-events: none;
	transition: transform 0.16s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.16s;
}

.xy-reactions-tray:hover .xy-reactions-option-face,
.xy-reactions-tray.has-hot .xy-reactions-option-face {
	transform: scale(0.88);
}

.xy-reactions-tray .xy-reactions-option:hover .xy-reactions-option-face,
.xy-reactions-tray .xy-reactions-option:focus-visible .xy-reactions-option-face,
.xy-reactions-tray .xy-reactions-option.is-hot .xy-reactions-option-face {
	opacity: 1;
	transform: translateY(-6px) scale(1.4);
}

.xy-reactions-option[aria-pressed="true"]::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--xy-reactions-color);
	content: "";
	transform: translateX(-50%);
}

.xy-reactions-bubble {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgb(15 15 20 / 90%);
	box-shadow: var(--xy-reactions-bubble-edge, none);
	color: #fff;
	font: 600 11px/1.3 var(--ui-font, inherit);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -4px) scale(0.85);
	transition: opacity 0.12s, transform 0.16s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.xy-reactions-bubble-count {
	margin-left: 5px;
	font-weight: 500;
	opacity: 0.65;
}

.xy-reactions-option:hover .xy-reactions-bubble,
.xy-reactions-option:focus-visible .xy-reactions-bubble,
.xy-reactions-option.is-hot .xy-reactions-bubble {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Touch screens: bigger targets, and the bubble sits above the thumb. */
@media (hover: none), (pointer: coarse) {
	.xy-reactions-pill {
		height: 28px;
		padding: 0 9px 0 4px;
		font-size: 12.5px;
		touch-action: none;
	}

	.xy-reactions-face,
	.xy-reactions-seat {
		width: 18px;
		height: 18px;
	}

	.xy-reactions-option {
		width: 44px;
		height: 44px;
	}

	.xy-reactions-option-face {
		width: 34px;
		height: 34px;
	}

	.xy-reactions-tray:hover .xy-reactions-option-face,
	.xy-reactions-tray .xy-reactions-option:hover .xy-reactions-option-face {
		transform: none;
	}

	.xy-reactions-bubble {
		top: auto;
		bottom: calc(100% + 20px);
		transform: translate(-50%, 4px) scale(0.85);
	}

	.xy-reactions-option:hover .xy-reactions-bubble {
		opacity: 0;
	}

	.xy-reactions-tray .xy-reactions-option.is-hot .xy-reactions-option-face {
		transform: translateY(-14px) scale(1.5);
	}

	.xy-reactions-tray.has-hot .xy-reactions-option:not(.is-hot) .xy-reactions-option-face {
		opacity: 0.55;
		transform: scale(0.85);
	}

	.xy-reactions-tray .xy-reactions-option.is-hot .xy-reactions-bubble {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.xy-reactions-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Landing effects, positioned against the viewport */

.xy-reactions-fly,
.xy-reactions-ring,
.xy-reactions-spark {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
}

.xy-reactions-ring {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid currentcolor;
	border-radius: 50%;
}

.xy-reactions-spark {
	border-radius: 50%;
	background: currentcolor;
}

@keyframes xy-reactions-pop {
	0% { transform: scale(0.45); }
	55% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

@keyframes xy-reactions-hop {
	0%,
	100% { transform: none; }
	35% { transform: translateY(-4px) rotate(-10deg); }
	65% { transform: translateY(1px) rotate(5deg); }
}

@keyframes xy-reactions-ping {
	0%,
	100% { transform: none; }
	45% { transform: scale(1.3) rotate(90deg); }
}

@keyframes xy-reactions-up {
	0% {
		opacity: 0;
		transform: translateY(70%);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes xy-reactions-down {
	0% {
		opacity: 0;
		transform: translateY(-70%);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.xy-reactions.is-hint .xy-reactions-face {
		animation: xy-reactions-hop 0.5s ease-in-out;
	}

	.xy-reactions.is-hint .xy-reactions-face:nth-child(2) {
		animation-delay: 0.07s;
	}

	.xy-reactions.is-hint .xy-reactions-face:nth-child(3) {
		animation-delay: 0.14s;
	}

	.xy-reactions.is-hint .xy-reactions-seat {
		animation: xy-reactions-ping 0.6s 0.28s ease-in-out;
	}

	.xy-reactions-seat.is-pop,
	.xy-reactions-face.is-pop {
		animation: xy-reactions-pop 0.46s cubic-bezier(0.2, 1.5, 0.4, 1);
	}

	.xy-reactions-total.is-up {
		animation: xy-reactions-up 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
	}

	.xy-reactions-total.is-down {
		animation: xy-reactions-down 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xy-reactions-tray,
	.xy-reactions.is-open .xy-reactions-tray {
		transition: none;
	}

	.xy-reactions-pill,
	.xy-reactions-face,
	.xy-reactions-seat,
	.xy-reactions-option-face {
		transition: none;
	}
}