.snays-rate{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.snays-rate-cap{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--snays-text-soft);
}

.snays-rate-stars{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 20px;
}

.snays-rate-input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
          appearance: none;
}

.snays-rate-label{
  display: inline-flex;
  cursor: pointer;
  padding: 2px 2px;
  color: var(--snays-gold);
}

.snays-rate-star{
  display: block;
  overflow: visible;
  pointer-events: none;
  width: 26px;
  height: 26px;
}

.snays-rate-ring,
.snays-rate-fill,
.snays-rate-line,
.snays-rate-stroke{
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.snays-rate-ring,
.snays-rate-fill,
.snays-rate-line{
  stroke: var(--snays-gold);
}

.snays-rate-fill{
  fill: var(--snays-gold);
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: fill var(--snays-transition), transform var(--snays-transition);
}

.snays-rate-line{
  stroke-dasharray: 12 13;
  stroke-dashoffset: -13;
}

.snays-rate-stroke{
  stroke: var(--snays-border-color);
  transform-origin: center;
  transform-box: fill-box;
  transition: stroke var(--snays-transition);
}

[data-theme="dark"] .snays-rate-stroke{
  stroke: rgba(255,255,255,.22);
}

.snays-rate-label--d1 .snays-rate-ring,
.snays-rate-label--d1 .snays-rate-fill,
.snays-rate-label--d1 .snays-rate-line,
.snays-rate-label--d1 .snays-rate-stroke{ animation-delay: .05s; }

.snays-rate-label--d2 .snays-rate-ring,
.snays-rate-label--d2 .snays-rate-fill,
.snays-rate-label--d2 .snays-rate-line,
.snays-rate-label--d2 .snays-rate-stroke{ animation-delay: .10s; }

.snays-rate-label--d3 .snays-rate-ring,
.snays-rate-label--d3 .snays-rate-fill,
.snays-rate-label--d3 .snays-rate-line,
.snays-rate-label--d3 .snays-rate-stroke{ animation-delay: .15s; }

.snays-rate-label--d4 .snays-rate-ring,
.snays-rate-label--d4 .snays-rate-fill,
.snays-rate-label--d4 .snays-rate-line,
.snays-rate-label--d4 .snays-rate-stroke{ animation-delay: .20s; }

.snays-rate-stars[data-hover="1"] .snays-rate-label:nth-of-type(-n+1) .snays-rate-stroke,
.snays-rate-stars[data-hover="2"] .snays-rate-label:nth-of-type(-n+2) .snays-rate-stroke,
.snays-rate-stars[data-hover="3"] .snays-rate-label:nth-of-type(-n+3) .snays-rate-stroke,
.snays-rate-stars[data-hover="4"] .snays-rate-label:nth-of-type(-n+4) .snays-rate-stroke,
.snays-rate-stars[data-hover="5"] .snays-rate-label:nth-of-type(-n+5) .snays-rate-stroke{
  stroke: var(--snays-gold);
}

.snays-rate-stars[data-hover="1"] .snays-rate-label:nth-of-type(-n+1) .snays-rate-fill,
.snays-rate-stars[data-hover="2"] .snays-rate-label:nth-of-type(-n+2) .snays-rate-fill,
.snays-rate-stars[data-hover="3"] .snays-rate-label:nth-of-type(-n+3) .snays-rate-fill,
.snays-rate-stars[data-hover="4"] .snays-rate-label:nth-of-type(-n+4) .snays-rate-fill,
.snays-rate-stars[data-hover="5"] .snays-rate-label:nth-of-type(-n+5) .snays-rate-fill{
  fill: rgba(244,168,37,.18);
  transform: scale(1);
}

.snays-rate-input--1:checked ~ .snays-rate-label:nth-of-type(-n+1) .snays-rate-ring,
.snays-rate-input--2:checked ~ .snays-rate-label:nth-of-type(-n+2) .snays-rate-ring,
.snays-rate-input--3:checked ~ .snays-rate-label:nth-of-type(-n+3) .snays-rate-ring,
.snays-rate-input--4:checked ~ .snays-rate-label:nth-of-type(-n+4) .snays-rate-ring,
.snays-rate-input--5:checked ~ .snays-rate-label:nth-of-type(-n+5) .snays-rate-ring{
  animation-name: snays-rate-ring;
}

.snays-rate-input--1:checked ~ .snays-rate-label:nth-of-type(-n+1) .snays-rate-stroke,
.snays-rate-input--2:checked ~ .snays-rate-label:nth-of-type(-n+2) .snays-rate-stroke,
.snays-rate-input--3:checked ~ .snays-rate-label:nth-of-type(-n+3) .snays-rate-stroke,
.snays-rate-input--4:checked ~ .snays-rate-label:nth-of-type(-n+4) .snays-rate-stroke,
.snays-rate-input--5:checked ~ .snays-rate-label:nth-of-type(-n+5) .snays-rate-stroke{
  animation-name: snays-rate-stroke;
}

.snays-rate-input--1:checked ~ .snays-rate-label:nth-of-type(-n+1) .snays-rate-line,
.snays-rate-input--2:checked ~ .snays-rate-label:nth-of-type(-n+2) .snays-rate-line,
.snays-rate-input--3:checked ~ .snays-rate-label:nth-of-type(-n+3) .snays-rate-line,
.snays-rate-input--4:checked ~ .snays-rate-label:nth-of-type(-n+4) .snays-rate-line,
.snays-rate-input--5:checked ~ .snays-rate-label:nth-of-type(-n+5) .snays-rate-line{
  animation-name: snays-rate-line;
}

.snays-rate-input--1:checked ~ .snays-rate-label:nth-of-type(-n+1) .snays-rate-fill,
.snays-rate-input--2:checked ~ .snays-rate-label:nth-of-type(-n+2) .snays-rate-fill,
.snays-rate-input--3:checked ~ .snays-rate-label:nth-of-type(-n+3) .snays-rate-fill,
.snays-rate-input--4:checked ~ .snays-rate-label:nth-of-type(-n+4) .snays-rate-fill,
.snays-rate-input--5:checked ~ .snays-rate-label:nth-of-type(-n+5) .snays-rate-fill{
  animation-name: snays-rate-fill;
  fill: var(--snays-gold);
}

.snays-rate-text{
  position: absolute;
  top: calc(100% - 18px);
  left: 0;
  margin: 0;
  font-size: var(--snays-fs-xs);
  font-weight: 600;
  color: var(--snays-text);
  letter-spacing: .2px;
  line-height: 18px;
  white-space: nowrap;
}

.snays-rate-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@keyframes snays-rate-ring{
  from, 20%{
    animation-timing-function: ease-in;
    opacity: 1;
    r: 8px;
    stroke-width: 16px;
    transform: scale(0);
  }
  35%{
    animation-timing-function: ease-out;
    opacity: .5;
    r: 8px;
    stroke-width: 16px;
    transform: scale(1);
  }
  50%, to{
    opacity: 0;
    r: 16px;
    stroke-width: 0;
    transform: scale(1);
  }
}

@keyframes snays-rate-fill{
  from, 40%{
    animation-timing-function: ease-out;
    transform: scale(0);
  }
  60%{
    animation-timing-function: ease-in-out;
    transform: scale(1.2);
  }
  80%{
    transform: scale(.9);
  }
  to{
    transform: scale(1);
  }
}

@keyframes snays-rate-stroke{
  from{ transform: scale(1); }
  20%, to{ transform: scale(0); }
}

@keyframes snays-rate-line{
  from, 40%{
    animation-timing-function: ease-out;
    stroke-dasharray: 1 23;
    stroke-dashoffset: 1;
  }
  60%, to{
    stroke-dasharray: 12 13;
    stroke-dashoffset: -13;
  }
}

@media (max-width: 480px){
  .snays-rate-star{
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce){
  .snays-rate-ring,
  .snays-rate-fill,
  .snays-rate-line,
  .snays-rate-stroke{
    animation: none !important;
    transition: none !important;
  }
}