/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-progress-circle .circle-chart {
  display: block;
}
sharpen-progress-circle .circle-bg {
  fill: none;
  stroke: var(--color-mint);
  stroke-width: 2;
}
sharpen-progress-circle .circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
  animation: s-progress 1s ease-out forwards;
  stroke: var(--color-pine);
}
@keyframes s-progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
sharpen-progress-circle .label {
  fill: var(--color-pine);
  font-size: 0.5em;
  font-weight: bold;
  text-anchor: middle;
}