/*
***************
* review slider
***************
*/
.review-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 1px; /* ensure items border is visible */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.review-slider-track::-webkit-scrollbar {
  display: none;
}

/*
***************
* slider item
***************
*/
.review-slider-item {
  border-width: 1px;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/*
***************
* rating
***************
*/
.review-slider .review-slider-rating {
  display: flex;
  margin-bottom: 8px;
}

.review-slider-rating .review-slider-rating-icon {
  fill: var(--gray-200, #ebebeb);
  height: 16px;
  width: 16px;
}

/*
***************
* customer name
***************
*/
.review-slider .review-slider-customer-name {
  font-size: 1.3em;
  margin-bottom: 8px;
}

/*
***************
* review text
***************
*/
.review-slider .review-slider-text {
  margin: 0;
}

/*
***************
* footer
***************
*/
.review-slider .review-slider-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.review-slider .review-slider-footer .review-slider-buttons {
  display: flex;
  gap: var(--btn-gap);
  justify-content: flex-end;
}

.review-slider .review-slider-footer:not(:has(.btn)) .review-slider-buttons {
  width: 100%;
}

/*
***************
* navigation buttons
***************
*/
.review-slider .review-slider-button {
  background: var(--body-bg, #ffffff);
  border: var(--border-width, 1px) solid var(--btn-border-color, #9b9b9b);
  border-radius: var(--border-radius-sm, 0);
  color: var(--body-color, #000000);
  height: var(--btn-icon-height-sm);
  padding: 0;
  transition: var(--transition-base, 'all ease-in-out 0.3s');
  width: var(--btn-icon-height-sm);
}

@media (min-width: 576px) {
  .review-slider .review-slider-button {
    height: var(--btn-icon-height);
    width: var(--btn-icon-height);
  }
}

.review-slider .review-slider-button[disabled] {
  opacity: 0.3;
}

.review-slider .review-slider-button:not([disabled]):hover {
  border-color: var(--primary-color, #e21838);
}