<commit_before>// =============================================================================
// PRODUCT REVIEWS (CSS)
// =============================================================================


.productReviews {
    border-top: 1px solid color("greys", "lightest");
}

.productReviews-heading {
    margin-bottom: spacing("single") + spacing("eighth");
}

.productReviews-displayToggle {
    color: color("greys", "light");
    float: right;
    margin-top: spacing("single") + spacing("base");

    &:hover {
        color: color("greys", "darker");
    }
}


// Review list
// -----------------------------------------------------------------------------

.productReviews-list {
    @include u-listHorizontal;
    @include grid-row($behavior: "nest");
    display: none;
    margin-bottom: spacing("single");

    &.is-open {
        display: block;
    }
}


// Review item
// -----------------------------------------------------------------------------

.productReview {
    @include grid-column(12);
    margin-bottom: spacing("single");

    @include breakpoint("medium") {
        width: grid-calc(6, $total-columns);
    }

    @include breakpoint("large") {
        width: grid-calc(4, $total-columns);
    }
}

.productReview-title {
    margin: 0;
    text-transform: none;
}

.productReview-author {
    color: color("greys", "light");
    margin-bottom: spacing("base");
}

.productReview-rating {
    display: inline-block;
    margin-bottom: spacing("quarter");
}

.productReview-ratingNumber {
    @include u-hidden("visually");
}
<commit_msg>BIG-20414 Fix large lists of reviews layout<commit_after>// =============================================================================
// PRODUCT REVIEWS (CSS)
// =============================================================================


.productReviews {
    border-top: 1px solid color("greys", "lightest");
}

.productReviews-heading {
    margin-bottom: spacing("single") + spacing("eighth");
}

.productReviews-displayToggle {
    color: color("greys", "light");
    float: right;
    margin-top: spacing("single") + spacing("base");

    &:hover {
        color: color("greys", "darker");
    }
}


// Review list
//
// 1. Kill extra display inline-block spacing
// -----------------------------------------------------------------------------

.productReviews-list {
    @include u-listBullets("none");
    @include grid-row($behavior: "nest");
    display: none;
    font-size: 0; // 1
    margin-bottom: spacing("single");

    &.is-open {
        display: block;
    }
}


// Review item
// -----------------------------------------------------------------------------

.productReview {
    @include grid-column(12);
    display: inline-block;
    float: none;
    font-size: fontSize("base");
    margin-bottom: spacing("single");
    vertical-align: top;

    @include breakpoint("medium") {
        width: grid-calc(6, $total-columns);
    }

    @include breakpoint("large") {
        width: grid-calc(4, $total-columns);
    }
}

.productReview-title {
    margin: 0;
    text-transform: none;
}

.productReview-author {
    color: color("greys", "light");
    margin-bottom: spacing("base");
}

.productReview-rating {
    display: inline-block;
    margin-bottom: spacing("quarter");
}

.productReview-ratingNumber {
    @include u-hidden("visually");
}

{'fraction_non_alphanumeric': 0.3239773066587041, 'fraction_numerical': 0.005971931919976112, 'mean_word_length': 2.3300198807157058, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2892462', 'n_tokens_mistral': 975, 'n_tokens_neox': 909, 'n_words': 179}