/* Fuubo Ratings */
.fuubo-rating {
	--fuubo-rating-size: 24px;
	--fuubo-rating-gap: 2px;
	--fuubo-rating-empty: rgba(255,255,255,.18);
	--fuubo-rating-fill: #f4c400;
	--fuubo-rating-text: inherit;

	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	vertical-align: middle;
}

.fuubo-rating__stars-wrap {
	position: relative;
	display: inline-flex;
	width: calc((var(--fuubo-rating-size) * 5) + (var(--fuubo-rating-gap) * 4));
	height: var(--fuubo-rating-size);
	margin-bottom: 2px;
}

/* .fuubo-rating__stars {
	position: absolute;
	inset: 0;
	display: inline-flex;
	gap: var(--fuubo-rating-gap);
	white-space: nowrap;
	overflow: hidden;
} */

.fuubo-rating__stars {
  position: relative;
  display: inline-block;
  width: calc(var(--fuubo-rating-size) * 5);
  height: var(--fuubo-rating-size);
  background-color: #444;

  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.431L24 9.75l-6 5.847 1.416 8.264L12 18.897l-7.416 4.964L6 15.597 0 9.75l8.332-1.732z'/></svg>");
  -webkit-mask-size: var(--fuubo-rating-size) var(--fuubo-rating-size);
  -webkit-mask-repeat: repeat-x;

  mask-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.431L24 9.75l-6 5.847 1.416 8.264L12 18.897l-7.416 4.964L6 15.597 0 9.75l8.332-1.732z'/></svg>");
  mask-size: var(--fuubo-rating-size) var(--fuubo-rating-size);
  mask-repeat: repeat-x;
}

.fuubo-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ffcc00;
  width: 0%;
}

.fuubo-rating__stars--base {
	color: var(--fuubo-rating-empty);
}

.fuubo-rating__stars--fill {
	color: var(--fuubo-rating-fill);
}

.fuubo-rating__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fuubo-rating-size);
	height: var(--fuubo-rating-size);
	font-size: var(--fuubo-rating-size);
	line-height: 1;
}

.fuubo-rating__interactive {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--fuubo-rating-gap);
}

.fuubo-rating__button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.fuubo-rating.is-readonly .fuubo-rating__button {
	cursor: default;
}

.fuubo-rating__meta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: calc(var(--fuubo-rating-size) * 0.65);
	line-height: 1;
	color: var(--fuubo-rating-text);
	opacity: .92;
}

.fuubo-rating__average {
	font-weight: 700;
}

.fuubo-rating__count {
	opacity: .72;
}

.fuubo-rating.is-loading {
	opacity: .65;
	pointer-events: none;
}

@media (max-width: 767px) {
	.fuubo-rating {
		gap: 6px;
	}
}