.reviews {
  display: grid;
  gap: var(--comp-whitespace);
}

.ratingsDistribution {
  overflow: hidden;

  ul {
    list-style: none;
    display: flex;
    gap: var(--spacer-2);
    overflow-x: auto;
    padding-block: var(--spacer-1);
  }

  li {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 5em;
    align-items: center;
    flex-shrink: 0;

    &::before {
      display: block;
      content: '';

      height: var(--bar-height);
      margin-top: auto;
      background-color: var(--clr-fill);
      width: var(--spacer-6);
      border-radius: var(--spacer-0);
    }

    span {
      font-weight: var(--fw-bold);

      > span {
        font-weight: initial;
        font-size: 0.9em;
        color: var(--clr-text-muted);
      }
    }
  }
}

.reviewAi {
  summary {
    cursor: pointer;
  }
  p {
    padding-block: var(--spacer-2);
  }
  ul {
    list-style: none;
    display: flex;
    gap: var(--spacer-1);
    flex-wrap: wrap;

    li {
      padding: var(--spacer-1);
      background-color: var(--clr-bg-muted);
      border-radius: var(--spacer-0);
    }
  }
}

.reviewStats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacer-2);
}

.userReviews {

  &__list {
    padding-block-start: var(--spacer-1);
    display: grid;
    gap: var(--spacer-1);
    list-style: none;
  }
}

.review {
  &__summary {
    cursor: pointer;
  }

  &__text,
  &__metadata {
    padding-top: var(--spacer-1);
  }
}