/**
 * Centry blog reactions.
 *
 * Loaded only on a page that renders the block. Every colour and measure is a custom property
 * with a token fallback, so the Elementor style controls have one thing to set and the block
 * inherits the site's palette when they set nothing - which is also what makes it survive a
 * light theme without a second set of rules.
 */

.ce-reactions {
	--ce-reaction-direction: row;
	--ce-reaction-align: flex-start;
	--ce-reaction-gap: 0.75rem;
	--ce-reaction-radius: 999px;
	--ce-reaction-icon-size: 1.25rem;
	--ce-reaction-bg: var(--ce-color-surface-control, rgb(127 127 127 / 8%));
	--ce-reaction-bg-hover: var(--ce-color-surface-raised, rgb(127 127 127 / 16%));
	--ce-reaction-bg-active: var(--ce-color-accent, #e8631a);
	--ce-reaction-border: var(--ce-color-border, rgb(127 127 127 / 32%));
	--ce-reaction-text: var(--ce-color-text, inherit);
	/*
	 * Dark on the brand orange, not white. White is 3.37:1 against #e8631a and AA wants 4.5
	 * for text this size; the surface colour is 5.73:1. The selected state is the one that
	 * has to be readable, so it does not get to be the one that fails.
	 */
	--ce-reaction-text-active: var(--ce-color-surface, #0b0e14);
	--ce-reaction-count: var(--ce-color-muted, rgb(127 127 127));

	margin: var(--ce-space-md, 2rem) 0;
	padding: var(--ce-space-md, 2rem);
	border: 1px solid var(--ce-reaction-border);
	border-radius: var(--ce-radius, 8px);
	background: var(--ce-color-surface-raised, transparent);
}

.ce-reactions__title {
	margin: 0 0 0.5rem;
	font-size: var(--ce-text-lg, 1.125rem);
}

.ce-reactions__lead {
	margin: 0 0 var(--ce-space-sm, 1rem);
	color: var(--ce-reaction-count);
}

.ce-reactions__list {
	display: flex;
	flex-direction: var(--ce-reaction-direction);
	flex-wrap: wrap;
	justify-content: var(--ce-reaction-align);
	gap: var(--ce-reaction-gap);
	margin-top: var(--ce-space-sm, 1rem);
}

.ce-reaction {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* 44px tall at the default font size, so the target passes on a phone. */
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ce-reaction-border);
	border-radius: var(--ce-reaction-radius);
	background: var(--ce-reaction-bg);
	color: var(--ce-reaction-text);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		border-color 120ms ease;
}

.ce-reaction:hover {
	background: var(--ce-reaction-bg-hover);
}

.ce-reaction:focus-visible {
	outline: 2px solid var(--ce-reaction-bg-active);
	outline-offset: 2px;
}

/*
 * The selected state is a colour change and a border change and the label goes semibold.
 * Colour alone would leave it indistinguishable to anyone who cannot see the difference,
 * and aria-pressed covers the screen reader but not the sighted reader who is colour blind.
 */
.ce-reaction.is-selected {
	border-color: var(--ce-reaction-bg-active);
	background: var(--ce-reaction-bg-active);
	color: var(--ce-reaction-text-active);
}

.ce-reaction.is-selected .ce-reaction__label {
	font-weight: 600;
}

.ce-reaction.is-selected .ce-reaction__count {
	color: inherit;
}

.ce-reaction__icon {
	font-size: var(--ce-reaction-icon-size);
	line-height: 1;
}

.ce-reaction__count {
	color: var(--ce-reaction-count);
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
}

/*
 * The description is read, not shown. Inside the pill it turned four buttons into four
 * paragraphs and lost the compact row the design calls for; as part of the button's content
 * it still reaches a screen reader, which is who the extra sentence was for.
 */
.ce-reaction__desc {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ce-reactions__thanks {
	margin: var(--ce-space-sm, 1rem) 0 0;
	color: var(--ce-reaction-count);
}

.ce-reactions.has-error .ce-reactions__thanks {
	color: var(--ce-color-danger, #e5484d);
}

.ce-reactions.is-busy .ce-reactions__list {
	opacity: 0.6;
	pointer-events: none;
}

.ce-reactions__cta {
	margin-top: var(--ce-space-md, 2rem);
	padding-top: var(--ce-space-sm, 1rem);
	border-top: 1px solid var(--ce-reaction-border);
}

.ce-reactions__cta-title {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.ce-reactions__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ce-reactions__cta-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--ce-reaction-bg-active);
	border-radius: var(--ce-reaction-radius);
	color: var(--ce-reaction-text);
	text-decoration: none;
}

.ce-reactions__cta-link:hover,
.ce-reactions__cta-link:focus-visible {
	background: var(--ce-reaction-bg-active);
	color: var(--ce-reaction-text-active);
}

@media (prefers-reduced-motion: reduce) {
	.ce-reaction {
		transition: none;
	}
}