22

✏️ Editing: order-review.scss

// Star DOM order is 5..1 under `flex-direction: row-reverse` so the `~`
// sibling selector can fill stars 1..N without `:has()`.

.woocommerce-review-order {
	&.is-success {
		.woocommerce-review-order__title,
		.woocommerce-review-order__intro,
		.woocommerce-review-order__legend,
		.woocommerce-review-order__notice,
		.woocommerce-review-order__form {
			display: none;
		}
	}

&__items {
		list-style: none;
		padding: 0;
		margin: 0 0 1.5em;
	}

&__item {
		padding: 1.5em 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);

&:first-child {
			border-top: 0;
			padding-top: 0;
		}
	}

&__item-title {
		margin: 0 0 1em;
		font-size: 1.25em;
		line-height: 1.2;
		font-weight: 500;

a {
			text-decoration: underline;
		}
	}

&__item-row {
		display: flex;
		gap: 1.5em;
		align-items: flex-start;
	}

&__item-image {
		flex: 0 0 120px;
		max-width: 120px;

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

&__item-rating {
		flex: 0 0 auto;
		min-width: 8em;
	}

&__item-rating-label {
		margin: 0 0 0.25em;
	}

&__item-review {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

&__item-review-textarea {
		width: 100%;
		min-height: 6em;
		resize: vertical;
	}

&__item-rating-error {
		margin: 0.5em 0 0;
		color: var(--wc-red, #a00);
	}

&__item-status {
		margin: 0.5em 0 0;

&--ok {
			color: var(--wc-green, #008a20);
		}

&--error {
			color: var(--wc-red, #a00);
		}
	}

// Layered on `.woocommerce-info`; theme paints background, border, icon.
	&__notice {
		position: relative;

&-body {
			min-width: 0;
		}

&-title {
			margin: 0;
			font-weight: 600;
		}

&-text {
			margin: 0.25em 0 0;
		}

&-dismiss {
			position: absolute;
			top: 0.5em;
			right: 0.5em;
			background: transparent;
			border: 0;
			cursor: pointer;
			padding: 0;
			min-width: 24px;
			min-height: 24px;
			font-size: 1.25em;
			line-height: 1;
			color: inherit;
		}

&--hidden {
			display: none;
		}
	}

@media (max-width: 600px) {
		&__item-row {
			flex-direction: column;
		}

&__item-image {
			flex: 0 0 auto;
			max-width: 240px;
			width: 100%;
		}

&__item-rating,
		&__item-review {
			flex: 1 1 auto;
			width: 100%;
		}
	}
}

.woocommerce-star-rating {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
	line-height: 1;

&__stars {
		display: inline-flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
		gap: 4px;
	}

// Visually hide radios, keep them in the a11y tree.
	&__input {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

// Reset margin so the theme's `input[type=radio]+label` rule can't leak in.
	&__star {
		cursor: pointer;
		display: inline-flex;
		padding: 0;
		margin: 0;
		color: currentColor;
	}

&__input + &__star {
		margin-left: 0;
	}

// Absolute px so theme resets on `input[type=radio]+label` (e.g. font-size:0)
	// can't collapse the icon to 0x0.
	&__icon {
		display: block;
		width: 24px;
		height: 24px;
		fill: currentColor;
		opacity: 0.3;
		transition: opacity 100ms ease-in-out;
	}

// Checked input fills its own star + every following sibling (visual left).
	&__input:checked ~ .woocommerce-star-rating__star .woocommerce-star-rating__icon {
		opacity: 1;
	}

&__stars:hover .woocommerce-star-rating__icon {
		opacity: 0.3;
	}

&__star:hover .woocommerce-star-rating__icon,
	&__star:hover ~ .woocommerce-star-rating__star .woocommerce-star-rating__icon {
		opacity: 1;
	}

&__input:focus-visible + .woocommerce-star-rating__star {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

&__caption {
		min-height: 1em;
		min-width: 4em;
		font-size: 0.875em;
		opacity: 0.7;
	}
}

MR SKB