@import 'component';

/**
 * @prop --track-color: The track color.
 * @prop --indicator-color: The indicator color.
 */
:host {
  --track-color: var(--sl-color-gray-90);
  --indicator-color: var(--sl-color-primary-50);

  display: inline-flex;
}

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

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

.progress-ring__indicator {
  stroke: var(--indicator-color);
  transition: 0.35s stroke-dashoffset, 0.35s stroke;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

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

@import 'component';

/**
 * @prop --track-color: The track color.
 * @prop --indicator-color: The indicator color.
 */
:host {
  --track-color: var(--sl-color-gray-90);
  --indicator-color: var(--sl-color-primary-50);

  display: inline-flex;
}

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

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

.progress-ring__indicator {
  stroke: var(--indicator-color);
  transition: 0.35s stroke-dashoffset, 0.35s stroke;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.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;
}

Remove default color prop from progress ring
Remove default color prop from progress ring
