/* Star Rating block. Loaded in the editor and on the front end. */

.omg-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--dark-blue);
}

.omg-star-rating__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.omg-star-rating__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.omg-star-rating__value,
.omg-star-rating__count {
	white-space: nowrap;
}

/* Two stacked star rows: a grey track with a clipped coloured row on top. */
.omg-star-rating__stars {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	color: var(--omg-star-rating-color, #ffca00);
}

.omg-star-rating__stars-track,
.omg-star-rating__stars-fill-inner {
	display: flex;
	width: max-content;
}

.omg-star-rating__stars-track {
	color: var(--wp--preset--color--dark-blue-tint-3);
}

/* Width is set per instance to rating / 5, e.g. 4.5 stars renders at 90%. */
.omg-star-rating__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--omg-star-rating-fill, 0%);
	overflow: hidden;
}

.omg-star-rating__star {
	display: block;
	flex-shrink: 0;
	width: var(--omg-star-rating-size, 22px);
	height: var(--omg-star-rating-size, 22px);
}