<fieldset class="crb-star">
  <legend class="crb-sr">Priority</legend>
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Low</label
  >
  <label
    ><input type="radio" name="crb-star" checked /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Medium</label
  >
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >High</label
  >
</fieldset>

.crb-star { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-star label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-star input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-star svg {
  width: 22px; height: 22px;
  fill: transparent;
  stroke: #444461; stroke-width: 1.5;
  transition: stroke 0.3s, fill 0.4s;
}
.crb-star input:checked + svg {
  stroke: #f5a623; fill: #f5a623;
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.5));
  animation: crb-star-draw 0.6s ease-out;
}
@keyframes crb-star-draw {
  0%   { stroke-dasharray: 60; stroke-dashoffset: 60; fill: transparent; }
  60%  { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: transparent; }
  100% { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: #f5a623; }
}

@media (prefers-reduced-motion: reduce) {
  .crb-star,
  .crb-star * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}