@use "../../../1-helpers/functions";

[data-content="normal"] .woocommerce-Reviews {
	@include functions.media-breakpoint-up (lg) {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 5%;
	}
}

.entry-summary .woocommerce-Reviews {
	grid-template-columns: auto;
}

.woocommerce-Reviews {
	display: grid;
	row-gap: 40px;

	:is(h2, .comment-reply-title) {
		font-size: 16px;
		margin-bottom: 20px;
	}

	:is(.comment-notes, .woocommerce-noreviews) {
		font-size: 13px;
	}

	.commentlist {

		li {
			border-top: 1px solid var(--theme-border-color);

			&:not(:last-child) {
				.comment_container {
					padding-bottom: 40px;
				}
			}
		}

		.children {
			margin-top: 40px;
			
			@include functions.media-breakpoint-down(sm) {
				padding-inline-start: 35px;
			}

			@include functions.media-breakpoint-up(md) {
				padding-inline-start: 70px;
			}
		}
	}

	.comment_container {
		display: grid;
		gap: 25px;
		padding-top: 40px;
	}

	.ct-has-avatar .comment_container {
		@include functions.media-breakpoint-up (sm) {
			grid-template-columns: 45px 1fr;
		}
	}

	.avatar {
		max-width: 45px;
		border-radius: 100%;
	}

	.description {
		word-break: break-word;

		*:last-child {
			margin-bottom: 0;
		}
	}

	.star-rating {
		@include functions.media-breakpoint-down (xs) {
			margin-bottom: 7px;
		}

		@include functions.media-breakpoint-up (sm) {
			float: right;
			margin-top: 3px;
		}
	}

	.meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		line-height: 20px;

		:is(em, time, span) {
			font-size: 11px;
			font-weight: 500;
			text-transform: uppercase;

			&:not(:first-child) {
				margin-inline-start: 0.7em;
			}
		}
	}

	> .clear {
		display: none;
	}
}