:host {
  display: block;
  width: 100%;
}

  :host * {
    box-sizing: border-box;
  }

:host(.circle) {
  display: inline-flex;
  width: auto;
}

.progress-indicator--variant-bar {
  display: block;
  width: 100%;
  height: 0.25rem;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.progress-indicator--variant-bar::-webkit-progress-bar {
    border-radius: 0.125rem;
    background-color: var(--s-surface-raised-default);
  }

.progress-indicator--variant-bar::-webkit-progress-value {
    border-radius: 0.125rem;
    background-color: var(--s-border-highlight);
    -webkit-transition: width 0.25s;
    transition: width 0.25s;
  }

.progress-indicator--variant-bar::-moz-progress-bar {
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: var(--s-border-highlight);
    -moz-transition: width 0.25s;
    transition: width 0.25s;
  }

@media (prefers-reduced-motion) {

.progress-indicator--variant-bar::-moz-progress-bar {
      -moz-transition: none;
      transition: none
  }
    }

.progress-indicator--variant-bar.progress-indicator--size-s {
    height: 0.125rem;
  }

.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
      border-radius: 0.0625rem;
    }

.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
      border-radius: 0.0625rem;
    }

.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
      height: 0.125rem;
      border-radius: 0.0625rem;
    }

.progress-indicator--variant-circle {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: 3rem;
  height: 3rem;
}

.progress-indicator--variant-circle.progress-indicator--size-s {
    width: 1.5rem;
    height: 1.5rem;
  }

.progress-indicator__circle {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  inset: 0;
}

.progress-indicator__circle-background {
  stroke: var(--s-border-default);
  stroke-linecap: round;
}

.progress-indicator__circle-value {
  transition: stroke-dashoffset 0.25s;
  stroke: var(--s-interactive-primary-default);
  stroke-linecap: round;
}

@media (prefers-reduced-motion) {

.progress-indicator__circle-value {
    transition: none
}
  }