@use "../base";
@use "../colors";
@use "../functions" as *;

$fg-map: colors.$fg-map !default;
$ring-color: hsl(212.2, 46.8%, 60.2%) !default;

.RoundGauge {
  font-size: 1rem;
  width: 2.6em;
  height: 1.3em;
  margin: 0 auto;
  margin-bottom: 0.2em;
}

$pi: 3.1416;

.RoundGauge__ringTrack {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 10;
  stroke-dasharray: 50 * $pi;
  stroke-dashoffset: 50 * $pi;
}

.RoundGauge__ringFill {
  fill: transparent;
  stroke: $ring-color;
  stroke-width: 10;
  stroke-dasharray: 100 * $pi;
  transition: stroke 50ms ease-out;
}

.RoundGauge__needle,
.RoundGauge__ringFill {
  transition: transform 50ms ease-in-out;
}

.RoundGauge__needleLine,
.RoundGauge__needleMiddle {
  fill: colors.$bad;
}

.RoundGauge__alert {
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  fill: rgba(255, 255, 255, 0.1);
}

.RoundGauge__alert.max {
  fill: colors.$bad;
}

@each $color-name, $color-value in $fg-map {
  .RoundGauge--color--#{$color-name}.RoundGauge__ringFill {
    stroke: $color-value;
  }
}

@each $color-name, $color-value in $fg-map {
  .RoundGauge__alert--#{$color-name} {
    fill: $color-value;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    animation: RoundGauge__alertAnim
      1s
      cubic-bezier(0.34, 1.56, 0.64, 1)
      infinite;
  }
}

@keyframes RoundGauge__alertAnim {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}