/* compliance_ring_html, root .gw-ring.
   Every rule whose first compound holds .gw-ring (the ring, its ::after, the tones and the sizes)
   stays bare; the two label rules are scoped :where(.gw-ring), which adds zero specificity and
   so cannot change which rule wins. */

.gw-ring {
  --gw-ring-pct: 0;
  --gw-ring-c: var(--gw-brand);
  --gw-ring-size: 64px;
  --gw-ring-stroke: 4px;
  --gw-ring-num: 18px;
  --gw-ring-small: 10px;
  width: var(--gw-ring-size);
  height: var(--gw-ring-size);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: conic-gradient(var(--gw-ring-c) calc(var(--gw-ring-pct) * 1%), var(--gw-paper-2) 0);
  box-shadow: inset 0 0 0 var(--gw-ring-stroke) var(--gw-paper);
  display: grid;
  place-items: center;
  transition: box-shadow var(--gw-t);
}
.gw-ring::after {
  content: "";
  position: absolute;
  inset: calc(var(--gw-ring-stroke) + 2px);
  border-radius: 50%;
  background: var(--gw-paper);
  transition: background-color var(--gw-t);
}
:where(.gw-ring) .gw-ring-label {
  position: relative;
  z-index: 1;
  font-family: var(--gw-font-brand);
  font-size: var(--gw-ring-num);
  color: var(--gw-ink);
  letter-spacing: -.04em;
  line-height: 1;
}
:where(.gw-ring) .gw-ring-label small {
  font-family: var(--gw-font);
  font-size: var(--gw-ring-small);
  color: var(--gw-mute);
  font-weight: 500;
  margin-left: 1px;
}
/* Tones */
.gw-ring.gw-tone-brand { --gw-ring-c: var(--gw-brand); }
.gw-ring.gw-tone-moss  { --gw-ring-c: var(--gw-moss); }
.gw-ring.gw-tone-warn  { --gw-ring-c: var(--gw-warn-c); }
.gw-ring.gw-tone-rose  { --gw-ring-c: var(--gw-danger); }
.gw-ring.gw-tone-na    { background: var(--gw-paper-2); }
.gw-ring.gw-tone-na .gw-ring-label {
  font-family: var(--gw-font-emph);
  font-style: italic;
  font-size: 13px;
  color: var(--gw-mute);
  font-weight: 400;
  letter-spacing: 0;
}
/* Sizes */
.gw-ring.gw-size-sm {
  --gw-ring-size: 48px;
  --gw-ring-stroke: 3px;
  --gw-ring-num: 14px;
  --gw-ring-small: 9px;
}
.gw-ring.gw-size-md {
  --gw-ring-size: 64px;
  --gw-ring-stroke: 4px;
  --gw-ring-num: 18px;
  --gw-ring-small: 10px;
}
.gw-ring.gw-size-lg {
  --gw-ring-size: 84px;
  --gw-ring-stroke: 5px;
  --gw-ring-num: 22px;
  --gw-ring-small: 12px;
}
.gw-ring.gw-size-xl {
  --gw-ring-size: 120px;
  --gw-ring-stroke: 8px;
  --gw-ring-num: 32px;
  --gw-ring-small: 14px;
}