/**
 * The stars under a wheel, a tool or a game - see MrWin_Wheel_Rating.
 */

.mrwin-rating {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	justify-content: center;
	margin: 14px auto 6px;
	padding: 8px 14px;
	border-radius: var( --control-radius, 8px );
	color: var( --text-color, #111111 );
	text-align: center;
}

.mrwin-rating-ask {
	font-weight: 700;
}

.mrwin-rating-stars {
	display: inline-flex;
	gap: 2px;
}

.mrwin-rating-star {
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: color-mix( in srgb, var( --text-color, #111111 ) 22%, transparent );
	font: inherit;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.1s ease, color 0.1s ease;
}

.mrwin-rating-star.is-on {
	color: #f5b301;
}

.mrwin-rating-star.is-hover {
	transform: scale( 1.12 );
}

.mrwin-rating-star:focus-visible {
	outline: 2px solid var( --primary-color, #7c3aed );
	outline-offset: 2px;
	border-radius: 4px;
}

.mrwin-rating.is-voted .mrwin-rating-star {
	cursor: default;
}

.mrwin-rating-summary {
	min-height: 1.4em;
	font-size: 0.95rem;
	color: var( --text-color-light, #666666 );
	font-variant-numeric: tabular-nums;
}