/* One row, vertically centred, that shrink-wraps its contents so the alignment
   control has something to position. */
.tcb-review-badge-wrap{ display:flex; }

.tcb-review-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;
	line-height:1;
}

/* height:auto keeps the width/height attributes' ratio rather than overriding
   it, so the reserved box is the right shape and nothing shifts on load. */
.tcb-review-badge__logo{ flex:none; display:block; height:auto; }
.tcb-review-badge__rating{ flex:none; }
.tcb-review-badge__count{ flex:none; }

/* The filled row sits exactly on top of the empty one and is clipped by width,
   so a partial star is a partial star rather than a rounded one. Both rows are
   built from the same markup, so they cannot drift apart at any size. */
.tcb-review-badge__stars{
	position:relative;
	display:flex;
	align-items:center;
	flex:none;
}

.tcb-review-badge__stars-empty,
.tcb-review-badge__stars-fill{
	display:flex;
	align-items:center;
	gap:2px;
}

.tcb-review-badge__stars-fill{
	position:absolute;
	inset:0;
	overflow:hidden;
}

/* The star's viewBox is its exact bounding box, so this box IS the ink and the
   flex centring above lands it on the same optical line as the text. Sized in
   `em` so the Star Size control keeps working. */
.tcb-review-badge__star{
	display:block;
	flex:none;
	width:1em;
	height:auto;
	fill:currentColor;
}