.is-loading {
	.wc-block-review-list-item__text {
		@include placeholder();
		display: block;
		width: 60%;
	}

	.wc-block-review-list-item__info {
		.wc-block-review-list-item__image {
			@include placeholder();
		}

		.wc-block-review-list-item__meta {
			.wc-block-review-list-item__author {
				@include placeholder();
				@include font-size(regular);
				width: 80px;
			}

			.wc-block-review-list-item__product {
				display: none;
			}

			.wc-block-review-list-item__rating {
				.wc-block-review-list-item__rating__stars > span {
					display: none;
				}
			}
		}

		.wc-block-review-list-item__published-date {
			@include placeholder();
			height: 1em;
			width: 120px;
		}
	}
}

.editor-styles-wrapper .wc-block-review-list-item__item,
.wc-block-review-list-item__item {
	margin: 0 0 $gap-large * 2;
	list-style: none;
}

.wc-block-review-list-item__info {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: $gap-large;
}

.wc-block-review-list-item__meta {
	grid-column: 1;
	grid-row: 1;
}

.has-image {
	.wc-block-review-list-item__info {
		grid-template-columns: #{48px + $gap} 1fr;
	}
	.wc-block-review-list-item__meta {
		grid-column: 2;
	}
}

.wc-block-review-list-item__image {
	height: 48px;
	grid-column: 1;
	grid-row: 1 / 3;
	width: 48px;
	position: relative;

	img {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.wc-block-review-list-item__verified {
	width: 21px;
	height: 21px;
	text-indent: 21px;
	margin: 0;
	line-height: 21px;
	overflow: hidden;
	position: absolute;
	right: -7px;
	bottom: -7px;

	&::before {
		width: 21px;
		height: 21px;
		background: transparent url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none"%3E%3Ccircle cx="10.5" cy="10.5" r="10.5" fill="%23fff"/%3E%3Cpath fill="%23008A21" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3Cmask id="a" width="17" height="17" x="2" y="2" maskUnits="userSpaceOnUse"%3E%3Cpath fill="%23fff" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%23008A21" d="M.5.5h20v20H.5z"/%3E%3C/g%3E%3C/svg%3E') center center no-repeat; /* stylelint-disable-line */
		display: block;
		content: "";
	}
}

.wc-block-review-list-item__meta {
	display: flex;
	align-items: center;
	flex-flow: row wrap;

	&::after {
		// Force wrap after star rating.
		order: 3;
		content: "";
		flex-basis: 100%;
	}
}

.wc-block-review-list-item__product {
	display: block;
	font-weight: bold;
	order: 1;
	margin-right: $gap/2;
}

.wc-block-review-list-item__author {
	display: block;
	font-weight: bold;
	order: 1;
	margin-right: $gap/2;
}

.wc-block-review-list-item__product + .wc-block-review-list-item__author {
	font-weight: normal;
	color: #808080;
	order: 4;
}

.wc-block-review-list-item__published-date {
	color: #808080;
	order: 5;
}

.wc-block-review-list-item__author + .wc-block-review-list-item__published-date {
	&::before {
		content: "";
		display: inline-block;
		margin-right: $gap/2;
		border-right: 1px solid #ddd;
		height: 1em;
		vertical-align: middle;
	}
}

.wc-block-review-list-item__author:first-child + .wc-block-review-list-item__published-date,
.wc-block-review-list-item__rating + .wc-block-review-list-item__author + .wc-block-review-list-item__published-date {
	&::before {
		display: none;
	}
}

.wc-block-review-list-item__rating {
	order: 2;

	> .wc-block-review-list-item__rating__stars {
		@include font-size(regular);
		display: inline-block;
		top: 0;
		overflow: hidden;
		position: relative;
		height: 1.618em;
		line-height: 1.618;
		width: 5.3em;
		font-family: star; /* stylelint-disable-line */
		font-weight: 400;
		vertical-align: top;
	}

	> .wc-block-review-list-item__rating__stars::before {
		content: "\53\53\53\53\53";
		opacity: 0.25;
		float: left;
		top: 0;
		left: 0;
		position: absolute;
	}

	> .wc-block-review-list-item__rating__stars span {
		overflow: hidden;
		float: left;
		top: 0;
		left: 0;
		position: absolute;
		padding-top: 1.5em;
	}

	> .wc-block-review-list-item__rating__stars span::before {
		content: "\53\53\53\53\53";
		top: 0;
		position: absolute;
		left: 0;
		color: #e6a237;
	}
}
