/**
 * WP-PostRatings front end styles.
 *
 * The rating shapes are CSS masks, so the markup carries no images and the
 * colour is whatever the theme sets. Everything worth changing is a custom
 * property on .wp-postratings -- restyling needs no PHP and no plugin files.
 *
 *     .wp-postratings {
 *         --wp-postratings-size: 24px;
 *         --wp-postratings-color-on: #e5484d;
 *     }
 */

/* No defaults block on purpose: each property carries its default as a var()
   fallback where it is used, so the settings screen's injected values have
   nothing to lose a specificity contest against. */

.wp-postratings {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* The rating table's first column holds a preview, and .wp-postratings is
   inline-flex with no padding of its own, so the glyphs sat flush against the
   cell edge while every other column had the table's own padding. */
.wp-postratings-rating-preview {
	padding-inline-start: 8px;
}

/* Built-in colours, so the picker compares shapes rather than the current
   rating's colour. Literals, because the strip's inline custom property would
   beat a var() fallback; a test holds them equal to the PHP constants. */
.wp-postratings-shape-preview .wp-postratings-track {
	color: #d4d4d8;
}

.wp-postratings-shape-preview .wp-postratings-fill,
.wp-postratings-shape-preview .wp-postratings-single {
	color: #f5a623;
}

/* No display of its own, twice learnt: the <p> already stacks, and display:flex
   here makes the preview a flex item and it stops drawing. */
.wp-postratings-shape-row {
	margin-block: 0.5em;
}

/* The parts of a picker row sit on the text baseline, so the preview needs
   aligning to the radio and the label beside it. */
.wp-postratings-shape-row .wp-postratings {
	vertical-align: middle;
	margin-inline: 0.5em;
}

/* --- the shape itself ---------------------------------------------------- */

.wp-postratings-item {
	display: block;
	flex: none;
	inline-size: var( --wp-postratings-size, 20px );
	block-size: var( --wp-postratings-size, 20px );
	background-color: currentColor;

	/* -webkit- prefix kept: Safari only unprefixed mask-image in 17.4, and the
	   plugin supports older iOS than that. */
	-webkit-mask-image: var( --wp-postratings-shape );
	mask-image: var( --wp-postratings-shape );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- numbers instead of a mask ------------------------------------------- */

.wp-postratings-numeric .wp-postratings-item {
	inline-size: auto;
	min-inline-size: var( --wp-postratings-size, 20px );
	background-color: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	font-style: normal;
	font-size: calc( var( --wp-postratings-size, 20px ) * 0.85 );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	display: grid;
	place-items: center;
	line-height: 1;
}

.wp-postratings-numeric .wp-postratings-row,
.wp-postratings-numeric.wp-postratings-vote {
	gap: var( --wp-postratings-gap, 0 );
}

/* Equal columns, so the two-digit cell on a ten point scale cannot outgrow the
   rest on a wider font and put the percentage fill off a cell boundary. */
.wp-postratings-numeric .wp-postratings-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

/* One outline for all four edges: a border on the sides and inset shadows top
   and bottom read at different weights. It also costs no layout width. */
.wp-postratings-numeric.wp-postratings-strip,
.wp-postratings-numeric.wp-postratings-scale {
	outline: 1px solid var( --wp-postratings-color-off, #d4d4d8 );
	outline-offset: -1px;
}

/* The scale's steps are separate boxes, so each still draws its own edges. */
.wp-postratings-numeric.wp-postratings-scale label {
	box-shadow:
		inset 0 1px 0 var( --wp-postratings-color-off, #d4d4d8 ),
		inset 0 -1px 0 var( --wp-postratings-color-off, #d4d4d8 );
}

.wp-postratings-numeric .wp-postratings-track .wp-postratings-item,
.wp-postratings-numeric .wp-postratings-fill .wp-postratings-item {
	background-color: color-mix( in srgb, currentColor 16%, transparent );
}

.wp-postratings-numeric.wp-postratings-scale label {
	background-image: linear-gradient(
		to right,
		color-mix( in srgb, var( --wp-postratings-color-on, #f5a623 ) 16%, transparent ) var( --wp-postratings-step-fill, 0% ),
		color-mix( in srgb, var( --wp-postratings-color-off, #d4d4d8 ) 16%, transparent ) var( --wp-postratings-step-fill, 0% )
	);
}

[dir="rtl"] .wp-postratings-numeric.wp-postratings-scale label {
	background-image: linear-gradient(
		to left,
		color-mix( in srgb, var( --wp-postratings-color-on, #f5a623 ) 16%, transparent ) var( --wp-postratings-step-fill, 0% ),
		color-mix( in srgb, var( --wp-postratings-color-off, #d4d4d8 ) 16%, transparent ) var( --wp-postratings-step-fill, 0% )
	);
}

.wp-postratings-numeric.wp-postratings-scale:hover label,
.wp-postratings-numeric.wp-postratings-scale:focus-within label,
.wp-postratings-numeric.wp-postratings-scale:has( input:checked ) label {
	background-image: none;
	background-color: color-mix( in srgb, currentColor 16%, transparent );
}

/* --- read-only display --------------------------------------------------- */

.wp-postratings-strip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	line-height: 1;
}

.wp-postratings-row {
	display: flex;
	gap: var( --wp-postratings-gap, 2px );
	inline-size: max-content;
}

.wp-postratings-track {
	color: var( --wp-postratings-color-off, #d4d4d8 );
}

/* A lone glyph -- an up/down vote, or a settings screen preview -- sits in
   normal flow and is always shown in the "on" colour. */
.wp-postratings-single {
	color: var( --wp-postratings-color-on, #f5a623 );
}

/* An up/down pair with no verdict yet: both glyphs, in the unrated colour. */
.wp-postratings-undecided {
	color: var( --wp-postratings-color-off, #d4d4d8 );
}

.wp-postratings-single.wp-postratings-shape-thumb,
.wp-postratings-single.wp-postratings-shape-plusminus,
.wp-postratings-single.wp-postratings-shape-tickcross,
.wp-postratings-single.wp-postratings-shape-updown {
	color: var( --wp-postratings-color-on, #f5a623 );
}

/* Clipped to a percentage, so 3.7 of 5 renders as 74% rather than rounding to
   the nearest half. */
.wp-postratings-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var( --wp-postratings-color-on, #f5a623 );
	inline-size: var( --wp-postratings-fill, 0% );
}

/* --- voting: a scale ----------------------------------------------------- */

.wp-postratings-vote {
	display: inline-flex;
	align-items: center;
	gap: var( --wp-postratings-gap, 2px );
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

/* The scale is a span carrying role="radiogroup"; see the note in
   WP_PostRatings_Template::scale_control() for why it is not a fieldset. */


.wp-postratings-vote > legend {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wp-postratings-vote input[type="radio"] {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	pointer-events: none;
}

.wp-postratings-vote label {
	display: block;
	cursor: pointer;
	color: var( --wp-postratings-color-off, #d4d4d8 );
	transition: color var( --wp-postratings-transition, 120ms ease-in-out );
}

.wp-postratings-vote label span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Laid out in reverse so a sibling combinator can reach backwards, which is
   what keeps the hover fill in CSS rather than JavaScript. */
.wp-postratings-scale {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Each glyph carries its own share of the score, rather than one strip laid
   over the row: a strip has to guess the row's geometry and a theme's padding
   on a label breaks that guess. */
.wp-postratings-scale label .wp-postratings-item {
	background-image: linear-gradient(
		to right,
		var( --wp-postratings-color-on, #f5a623 ) var( --wp-postratings-step-fill, 0% ),
		var( --wp-postratings-color-off, #d4d4d8 ) var( --wp-postratings-step-fill, 0% )
	);
}

[dir="rtl"] .wp-postratings-scale label .wp-postratings-item {
	background-image: linear-gradient(
		to left,
		var( --wp-postratings-color-on, #f5a623 ) var( --wp-postratings-step-fill, 0% ),
		var( --wp-postratings-color-off, #d4d4d8 ) var( --wp-postratings-step-fill, 0% )
	);
}

.wp-postratings-numeric.wp-postratings-scale label .wp-postratings-item {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wp-postratings-numeric.wp-postratings-scale:hover label .wp-postratings-item,
.wp-postratings-numeric.wp-postratings-scale:focus-within label .wp-postratings-item,
.wp-postratings-numeric.wp-postratings-scale:has( input:checked ) label .wp-postratings-item {
	color: currentColor;
}

/* Interaction wins: hovering, focusing or having voted colours the labels, and
   the score underneath would otherwise show through the choice being made. */
.wp-postratings-scale:hover label .wp-postratings-item,
.wp-postratings-scale:focus-within label .wp-postratings-item,
.wp-postratings-scale:has( input:checked ) label .wp-postratings-item {
	background-image: none;
}

.wp-postratings-scale label:hover,
.wp-postratings-scale label:hover ~ label,
.wp-postratings-scale input:focus-visible + label,
.wp-postratings-scale input:focus-visible + label ~ label {
	color: var( --wp-postratings-color-hover, var( --wp-postratings-color-on, #f5a623 ) );
}

.wp-postratings-scale input:checked + label,
.wp-postratings-scale input:checked + label ~ label {
	color: var( --wp-postratings-color-on, #f5a623 );
}

.wp-postratings-scale input:focus-visible + label {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- voting: up / down --------------------------------------------------- */

/* Buttons, not a radio group: two opposing actions, not one value of several. */
.wp-postratings-updown button {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	color: var( --wp-postratings-color-off, #d4d4d8 );
	transition: color var( --wp-postratings-transition, 120ms ease-in-out );
}

.wp-postratings-updown button:hover,
.wp-postratings-updown button:focus-visible {
	color: var( --wp-postratings-color-hover, var( --wp-postratings-color-on, #f5a623 ) );
}

.wp-postratings-updown button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* A step's own rated colour wins over the built-in green and red, so an
   up/down pair coloured in the settings shows those colours rather than these.
   The built-ins stay as the fallback for a site that has set neither. */
.wp-postratings-updown .wp-postratings-up:hover,
.wp-postratings-updown .wp-postratings-up:focus-visible {
	color: var( --wp-postratings-color-on, var( --wp-postratings-color-up, #2e9e4f ) );
}

.wp-postratings-updown .wp-postratings-down:hover,
.wp-postratings-updown .wp-postratings-down:focus-visible {
	color: var( --wp-postratings-color-on, var( --wp-postratings-color-down, #e5484d ) );
}

.wp-postratings-updown button span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- state --------------------------------------------------------------- */

.wp-postratings[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity var( --wp-postratings-transition, 120ms ease-in-out );
}

.wp-postratings[aria-busy="true"] label,
.wp-postratings[aria-busy="true"] button {
	pointer-events: none;
}

/* The rich snippet is <meta> elements inside a wrapper, which has to be a
   block element to be valid and so has to be taken out of flow by hand. */
.wp-postratings-schema {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-postratings-vote label,
	.wp-postratings-updown button,
	.wp-postratings {
		transition: none;
	}
}

@media (prefers-contrast: more) {
	.wp-postratings,
	.wp-postratings-strip,
	.wp-postratings-vote {
		--wp-postratings-color-off: #6b7280;
	}
}

/* The unrated grey glares on a dark page. All three selectors: .wp-postratings
   comes only from the_ratings(), and a bare strip can be printed without it. */
@media (prefers-color-scheme: dark) {
	.wp-postratings,
	.wp-postratings-strip,
	.wp-postratings-vote {
		--wp-postratings-color-off: #52525b;
	}
}