/* MK Meter Widget */
.mk-meter{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:1;
  background:transparent;
}

.mk-meter-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.mk-meter-ring{
  fill:none;
  stroke:var(--mk-ring-color, #0A67F2);
  stroke-width:var(--mk-ring-width, 18);
  stroke-linecap:butt;
  stroke-dasharray:var(--mk-ring-dash, 4 6);
  transform-origin:100px 100px;
  will-change:transform;
  animation:mkMeterSpin var(--mk-spin-speed, 7s) linear infinite;
}

.mk-meter:hover .mk-meter-ring{
  animation-duration:var(--mk-spin-hover, 28s);
}

.mk-meter-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  margin:0;
  padding:0;
}

.mk-meter-number{
  display:block;
  font-family:inherit;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  color:var(--mk-num-color, #111);
  font-weight:var(--mk-num-weight, 500);
}

@keyframes mkMeterSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
