/* Like and dislike buttons in a small bar under each post, in the same style as the buttons of the post and the toolbar of the
   editor: a bar in the tint colour with flat buttons. Colours come from the style's variables, with plain fallbacks for other styles. */

.bf-votes {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	inline-size: fit-content;
	margin-top: 1rem;
	padding: 0.25rem;
	border-radius: var(--radius, 0.5rem);
	background: var(--color-tint, #eef2f7);
	/* The text colour of the style, toned down towards grey so the toolbar is calm. Still above 7:1 on the page colour. */
	--bf-vote-ink: color-mix(in srgb, var(--color-text, #1d2b3c) 55%, gray);
}

.bf-votes-form {
	display: contents;
}

.bf-vote {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2.25rem;
	min-width: 2.25rem;
	padding: 0 0.6rem;
	border: var(--border-control, 0.15rem) solid transparent;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--bf-vote-ink);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.bf-vote:hover:not(.is-readonly) {
	border-color: var(--color-control, #6b7f99);
	background: var(--color-tint, #eef2f7);
}

/* prosilver draws a dotted line on every focused button. A click should not leave it; keyboard focus keeps its line. */
.bf-vote:focus:not(:focus-visible),
.bf-collapsed-toggle:focus:not(:focus-visible) {
	outline: none;
}

.bf-vote:focus-visible {
	outline: 3px solid var(--color-focus, #215188);
	outline-offset: 2px;
}

/* A chosen vote has a ring, a tint and a filled icon, so colour is not the only sign. */
.bf-vote.is-active {
	border-color: var(--color-control, #6b7f99);
	background: var(--color-tint, #eef2f7);
}

.bf-vote.is-readonly {
	cursor: default;
	opacity: 0.75;
}

.bf-vote-count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* The words stay for screen readers. */
.bf-vote-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bf-votes.is-busy .bf-vote {
	opacity: 0.6;
	pointer-events: none;
}

.bf-votes-status {
	padding-inline: 0.5rem;
	color: var(--color-muted, #3a4e66);
}

.bf-votes-status:empty {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.bf-vote {
		transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
	}
}

/* Too many dislikes: the dislike button turns red, and the post folds up behind a note.
   The fold only starts once the script has run, so the post is never stuck shut without it. */
.bf-vote.is-over {
	border-color: var(--color-danger, #a01010);
	color: var(--color-danger, #a01010);
}

.bf-vote.is-over:hover {
	border-color: var(--color-danger, #a01010);
}

.bf-vote.is-over.is-readonly,
.bf-vote.is-over:hover {
	background: color-mix(in srgb, var(--color-danger, #a01010) 12%, transparent);
}

.bf-collapsed-note {
	display: none;
}

.post:has(.bf-votes[data-low].is-ready):not(.bf-shown) :is(.content, .attachbox, .signature, .notice, .rules) {
	display: none;
}

/* The note sits in the toolbar, after the buttons. */
.post:has(.bf-votes[data-low].is-ready) .bf-collapsed-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: 0.5rem;
	color: var(--color-danger, #a01010);
}

.bf-collapsed-note p {
	margin: 0;
	font-weight: 700;
}

.bf-collapsed-toggle {
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: var(--border-control, 0.15rem) solid var(--color-danger, #a01010);
	border-radius: 0.5rem;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.bf-collapsed-toggle:focus-visible {
	outline: 3px solid var(--color-focus, #215188);
	outline-offset: 2px;
}

/* A click makes the icon bounce, and flash: the like in the accent colour, the dislike in red. */
@media (prefers-reduced-motion: no-preference) {
	.bf-vote .icon.bf-bounce {
		animation: bf-bounce 0.35s ease-out;
	}

	.bf-vote[value="up"] .icon.bf-bounce {
		--bf-flash: var(--accent, #215188);
	}

	.bf-vote[value="down"] .icon.bf-bounce {
		--bf-flash: var(--color-danger, #a01010);
	}

	@keyframes bf-bounce {
		0% {
			transform: scale(1);
		}

		35% {
			transform: scale(1.5) translateY(-0.2rem);
			color: var(--bf-flash);
		}

		65% {
			transform: scale(0.9);
			color: var(--bf-flash);
		}

		100% {
			transform: scale(1);
		}
	}
}