.tzr-rating {
  --rating-size: 20px;

  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.tzr-rating-star {
  position: relative;
  width: var(--rating-size);
  height: var(--rating-size);
  cursor: pointer;
}

.tzr-rating {
  --rating-size: 20px;

  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.tzr-rating-star {
  width: var(--rating-size);
  height: var(--rating-size);
  cursor: pointer;

  background:
    linear-gradient(
      to right,
      #c44 0%,
      #c44 var(--rating-fill, 0%),
      #ccc var(--rating-fill, 0%),
      #ccc 100%
    );

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.56l-6.18 3.25L7 13.93 2 9.06l6.91-1z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.56l-6.18 3.25L7 13.93 2 9.06l6.91-1z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.tzr-rating:not([data-readonly]) .tzr-rating-star {
  cursor: pointer;
}

.tzr-rating[data-readonly] .tzr-rating-star {
  cursor: default;
}

.tzr-rating-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rating-size);
  height: var(--rating-size);
  cursor: pointer;
}

.tzr-rating-cancel svg {
  width: 100%;
  height: 100%;
}

.tzr-rating-cancel-star {
  fill: #ccc;
}

.tzr-rating-cancel-slash {
  fill: none;
  stroke: #999;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tzr-rating-cancel:hover .tzr-rating-cancel-star {
  fill: #aaa;
}

.tzr-rating-cancel:hover .tzr-rating-cancel-slash {
  stroke: #c44;
}