­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ // 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; } }