/**
 * WP-Polls front end.
 *
 * Everything is scoped under the .wp-polls root class the plugin puts on the
 * outermost element of every block it renders, and nothing here sets a font or
 * a text colour: a poll is part of the page it sits in, so it inherits.
 *
 * The custom properties are the supported way to restyle a poll. Set them in
 * your own stylesheet rather than copying this file into your theme, and an
 * upgrade cannot take your changes away:
 *
 *   --wp-polls-bar-height        height of the result bar
 *   --wp-polls-bar-background    its fill colour
 *   --wp-polls-bar-border        its border colour
 *   --wp-polls-bar-image         a background-image layered over the fill
 *   --wp-polls-bar-radius        its corner radius
 *   --wp-polls-border            colour of the button and paging borders
 *   --wp-polls-surface           background of the vote button
 *
 * The fallback after each var() is what the settings screen ships with, so a
 * poll still renders if the inline block carrying the settings is filtered out.
 */

/* Poll answers. The list markers are cleared because a poll is a form, not
   prose, and themes commonly style li::before in a way that lands in the
   middle of an answer. */
.wp-polls ul,
.wp-polls-ul,
.wp-polls-ans ul {
	text-align: start;
	list-style: none;
	float: none;
}
.wp-polls ul li,
.wp-polls-ul li,
.wp-polls-ans ul li {
	text-align: start;
	background-image: none;
	display: block;
}
.wp-polls ul li::before,
.wp-polls-ans ul li::before {
	content: '';
}
/* The answer text sits beside its control rather than under it. A theme that
   makes every label a block would otherwise put each answer on its own line,
   below the radio it belongs to. */
.wp-polls label {
	display: inline;
}

/* The controls themselves are the theme's business.
 *
 * This rule used to reset display, border, padding and margin on every input
 * inside a poll, which breaks any theme that draws its own radio -- and the
 * bundled ones all do. With appearance: none an input is a non-replaced inline
 * box, and width and height do not apply to those, so display: inline threw
 * away the size the theme had set; border: 0 then erased the ring it drew the
 * circle with. Twenty Twenty-One's 25px circles came out as 6px slivers,
 * stretched to the line height.
 *
 * Nothing here needed that reset. The vote button carries its own border and
 * background a few rules down, and the list chrome is neutralised above. All
 * the poll actually wants is a gap between a control and the words next to it. */
.wp-polls input[type="radio"],
.wp-polls input[type="checkbox"] {
	margin-inline-end: 0.4em;
}
.wp-polls-ul {
	padding: 0;
	margin-block: 0 10px;
	margin-inline: 10px 0;
}
.wp-polls-ans {
	width: 100%;
}

/* The AJAX placeholder, hidden until a request is in flight. */
.wp-polls-loading {
	display: none;
	text-align: center;
}
/* The loading indicator. Drawn rather than shipped as a GIF: it inherits the
   theme's colour through currentColor, scales with the surrounding font size,
   and costs no request. The ring is three-quarters of a circle - one border
   side is transparent - spun by a transform. */
.wp-polls .wp-polls-spinner {
	display: inline-block;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: wp-polls-spin 0.8s linear infinite;
}
@keyframes wp-polls-spin {
	to {
		transform: rotate(360deg);
	}
}
/* Still legible, just not moving: the ring stays as a dimmed circle so the
   placeholder does not turn into an unexplained gap beside the word. */
@media (prefers-reduced-motion: reduce) {
	.wp-polls .wp-polls-spinner {
		animation: none;
		border-inline-end-color: currentColor;
		opacity: 0.4;
	}
}

/* The result bar: a track holding a fill, so a unanimous answer can render at
   a true 100% without its own border overflowing the track. */
.wp-polls .wp-polls-bar {
	box-sizing: border-box;
	width: 100%;
	height: var(--wp-polls-bar-height, 8px);
	margin-block: 2px;
	overflow: hidden;
	border: 1px solid var(--wp-polls-bar-border, #c8c8c8);
	border-radius: var(--wp-polls-bar-radius, 3px);
}
.wp-polls .wp-polls-bar-fill {
	height: 100%;
	border-radius: inherit;
	background-color: var(--wp-polls-bar-background, #d8e1eb);
	background-image: var(--wp-polls-bar-image, none);
	/* The width arrives inline, so there is no state change for a transition to
	   pick up. Scaling in from zero animates the same thing without needing to
	   know the target width in the stylesheet. */
	transform-origin: left center;
	animation: wp-polls-bar-grow 0.45s ease-out;
}
/* transform-origin has no logical keywords - the property predates them and
   Transforms Level 2 still only takes left/right - so this one direction rule
   is written out rather than avoided. */
[dir="rtl"] .wp-polls .wp-polls-bar-fill {
	transform-origin: right center;
}
@keyframes wp-polls-bar-grow {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-polls .wp-polls-bar-fill {
		animation: none;
	}
}

/* The vote button. Both colours are properties rather than fixed values, and
   both fall back to something derived from the text colour, so the button is
   still visible on a theme that paints a dark background. */
.wp-polls .Buttons {
	border: 1px solid var(--wp-polls-border, currentColor);
	background-color: var(--wp-polls-surface, transparent);
	color: inherit;
}

/* Polls archive paging. currentColor throughout: the page decides what colour
   text is, and these are links in that text. */
.wp-polls-paging a,
.wp-polls-paging span {
	padding: 2px 4px;
	margin: 2px;
	border: 1px solid var(--wp-polls-border, currentColor);
	color: inherit;
}
.wp-polls-paging a {
	text-decoration: none;
}
.wp-polls-paging a:hover,
.wp-polls-paging a:focus {
	text-decoration: underline;
}
.wp-polls-paging span.current {
	font-weight: bold;
}