@charset "UTF-8";

.rating {
  display: none;
  font-size: 30px;
  font-weight: bold;
  color: rgb(17, 179, 166);
  white-space: nowrap;
}

.rating .star {
  display: inline-block;
  position: relative;
  letter-spacing: 0.05em;
}

.rating .star::before {
  display: inline-block;
  color: #73d3c3;
  content: "☆";
  width: 1em;
  height: 1em;
}

.rating .star::after {
  display: inline-block;
  position: absolute;
  content: "★";
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
  transition: all 0.1s linear;
  overflow: hidden;
}

.rating:not([disabled]) .star:hover::after,
.rating .star.active::after {
  opacity: 1;
  width: 1em;
  height: 1em;
}

.rating .star.active.half::after {
  width: 0.5em;
}