/*------------------------------------------------------------
REVIEWS
====================================*/

/* Variables Custom */
$review-padding-y: 1.5rem !default;
$review-padding-x: 0 !default;
$review-border-width: 0.2rem !default;
$review-border-color: $gray-200 !default;
$review-line-height: 1.9rem !default;

$review-author-font-size: $font-size-base !default;
$review-author-font-weight: $font-weight-bold !default;
$review-author-color: $black !default;

$review-date-font-size: 1.3rem !default;
$review-date-color: $black !default;

$review-star-color: $info !default;
$review-star-disabled-color: $gray-300 !default;
$review-star-font-size: 1.2rem !default;

$review-date-order-font-size: $font-size-base !default;
$review-date-order-color: $gray-500 !default;

$review-title-font-size: $font-size-base !default;
$review-title-color: $black !default;

$review-content-font-size: 1.3rem !default;
/***************************************/

.product-review {
  padding: $review-padding-y $review-padding-x;
  text-align: left;
  line-height: $review-line-height;
  & + .product-review {
    border-top: $review-border-width solid $review-border-color;
  }

  p {
    margin: 0;
  }
}

.product-review-header {
  margin-bottom: 1rem;
}
.review-author {
  font-size: $review-author-font-size;
  font-weight: $review-author-font-weight;
  color: $review-author-color;
}

.review-date {
  font-size: $review-date-font-size;
  color: $review-date-color;
}

.review-rating-wrapper {
  display: flex;
  align-items: center;
}
.review-rating {
  font-size: $review-star-font-size;
  span:not(:last-child) {
    margin-right: 0.3rem;
  }
  .active {
    color: $review-star-color;
  }
  .disabled {
    color: $review-star-disabled-color;
  }
}
.review-date-order {
  margin-left: 1rem;
  font-size: $review-date-order-font-size - 0.2rem;
  color: $review-date-order-color;
}

.review-title {
  font-size: $review-content-font-size;
  color: $review-title-color;
}

.review-content {
  font-size: $review-content-font-size;
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(md) {
  .review-title {
    font-size: $review-title-font-size;
  }

  .review-date-order {
    font-size: $review-date-order-font-size;
  }
}
