/**
 * [lastore_sterren]: vijf groene sterren en het cijfer, met
 * daaronder het WebwinkelKeur-beeldmerk en het aantal beoordelingen.
 */

.lastore-sterren {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;

	width: 140px;
	gap: 5px;

	white-space: nowrap;

	color: #333333;
	text-decoration: none;
	line-height: 1;
}


/* ============================================================
   BOVENSTE EN ONDERSTE REGEL
   ============================================================ */

.lastore-sterren__rij,
.lastore-sterren__aantal {
	display: flex;
	align-items: center;

	width: 100%;
	justify-content: space-between;
}


/* ============================================================
   ONDERSTE REGEL
   ============================================================ */

.lastore-sterren__aantal {
	color: #595959;
	font-size: 13px;
	line-height: 1.2;
}

.lastore-sterren__tekst {
	transform: translateY(1px);
}


/* ============================================================
   WEBWINKELKEUR-BEELDMERK
   ============================================================ */

.lastore-sterren__merk {
	display: block;
	flex: 0 0 17px;

	width: 17px;
	height: 17px;
}


/* ============================================================
   STERREN
   ============================================================ */

.lastore-sterren__sterren {
	display: inline-flex;
	gap: 2px;
}

.lastore-sterren__sterren svg {
	display: block;

	width: 20px;
	height: 20px;
}

.lastore-sterren__sterren rect {
	fill: var(--lastore-sterren-groen, #00c371);
}

.lastore-sterren__sterren path {
	fill: #ffffff;
}


/* ============================================================
   CIJFER 9,6
   ============================================================ */

.lastore-sterren__cijfer {
	font-size: 15px;
	font-weight: 600;
}


/* ============================================================
   INTERACTIE
   ============================================================ */

.lastore-sterren:hover .lastore-sterren__aantal {
	text-decoration: underline;
}

.lastore-sterren:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 4px;
	border-radius: 2px;
}