:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --track-color: The track color.
 * @prop --indicator-color: The indicator color.
 */
:host {
  --track-color: var(--sl-color-gray-200);
  --indicator-color: var(--sl-color-blue-500);
  display: inline-flex;
}

.progress-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progress-ring__image {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-ring__track {
  stroke: var(--track-color);
}

.progress-ring__indicator {
  stroke: var(--indicator-color);
  transition: 0.35s stroke-dashoffset, 0.35s stroke;
}

.progress-ring__label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  user-select: none;
}