.md-progress-demo{display:grid;justify-items:center;gap:var(--md-sys-measurement-space200);max-inline-size:100%}.md-progress{display:block;inline-size:15rem;max-inline-size:100%;block-size:var(--_progress-height, var(--_progress-thickness))}.md-progress:where([data-variant$=circular]){inline-size:var(--_progress-size);block-size:var(--_progress-size)}.md-progress svg{display:block;inline-size:100%;block-size:100%;overflow:visible}.md-progress:where([data-variant$=linear]):dir(rtl) svg{transform:scaleX(-1)}.md-progress path{fill:none}.md-progress-track{stroke:var(--_progress-track)}.md-progress-active{stroke:var(--_progress-color)}.md-progress-stop{fill:var(--_progress-stop-color)}.md-progress-control{display:grid;inline-size:15rem;max-inline-size:100%;gap:var(--md-sys-measurement-space100)}.md-progress:where([data-variant=legacy-circular]){--_progress-color: var(--md-comp-circular-progress-indicator-active-indicator-color);--_progress-shape: var(--md-comp-circular-progress-indicator-active-indicator-shape);--_progress-thickness: var(--md-comp-circular-progress-indicator-active-indicator-width);--_progress-color-four: var(--md-comp-circular-progress-indicator-four-color-active-indicator-four-color);--_progress-color-one: var(--md-comp-circular-progress-indicator-four-color-active-indicator-one-color);--_progress-color-three: var(--md-comp-circular-progress-indicator-four-color-active-indicator-three-color);--_progress-color-two: var(--md-comp-circular-progress-indicator-four-color-active-indicator-two-color);--_progress-size: var(--md-comp-circular-progress-indicator-size)}.md-progress:where([data-variant=legacy-linear]){--_progress-color: var(--md-comp-linear-progress-indicator-active-indicator-color);--_progress-thickness: var(--md-comp-linear-progress-indicator-active-indicator-height);--_progress-shape: var(--md-comp-linear-progress-indicator-active-indicator-shape);--_progress-color-four: var(--md-comp-linear-progress-indicator-four-color-active-indicator-four-color);--_progress-color-one: var(--md-comp-linear-progress-indicator-four-color-active-indicator-one-color);--_progress-color-three: var(--md-comp-linear-progress-indicator-four-color-active-indicator-three-color);--_progress-color-two: var(--md-comp-linear-progress-indicator-four-color-active-indicator-two-color);--_progress-track: var(--md-comp-linear-progress-indicator-track-color);--_progress-track-thickness: var(--md-comp-linear-progress-indicator-track-height);--_progress-track-shape: var(--md-comp-linear-progress-indicator-track-shape)}.md-progress:where([data-variant=linear],[data-variant=circular]){--_progress-color: var(--md-comp-progress-indicator-active-indicator-color);--_progress-shape: var(--md-comp-progress-indicator-active-indicator-shape);--_progress-thickness: var(--md-comp-progress-indicator-active-indicator-thickness);--_progress-gap: var(--md-comp-progress-indicator-active-indicator-track-space);--_progress-stop-color: var(--md-comp-progress-indicator-stop-indicator-color);--_progress-stop-shape: var(--md-comp-progress-indicator-stop-indicator-shape)}.md-progress:where([data-variant=circular]){--_progress-thickness: var(--md-comp-progress-indicator-circular-active-indicator-thickness);--_progress-amplitude: var(--md-comp-progress-indicator-circular-active-indicator-wave-amplitude);--_progress-wavelength: var(--md-comp-progress-indicator-circular-active-indicator-wave-wavelength);--_progress-size: var(--md-comp-progress-indicator-circular-size);--_progress-track-thickness: var(--md-comp-progress-indicator-circular-track-thickness);--_progress-gap: var(--md-comp-progress-indicator-circular-track-active-indicator-space)}.md-progress:where([data-variant=circular]):where([data-shape=wave]){--_progress-size: var(--md-comp-progress-indicator-circular-with-wave-size)}.md-progress:where([data-variant=linear]){--_progress-thickness: var(--md-comp-progress-indicator-linear-active-indicator-thickness);--_progress-amplitude: var(--md-comp-progress-indicator-linear-active-indicator-wave-amplitude);--_progress-wavelength: var(--md-comp-progress-indicator-linear-active-indicator-wave-wavelength);--_progress-height: var(--md-comp-progress-indicator-linear-height);--_progress-stop-size: var(--md-comp-progress-indicator-linear-stop-indicator-size);--_progress-stop-trailing: var(--md-comp-progress-indicator-linear-stop-indicator-trailing-space);--_progress-track-thickness: var(--md-comp-progress-indicator-linear-track-thickness);--_progress-gap: var(--md-comp-progress-indicator-linear-track-active-indicator-space)}.md-progress:where([data-variant=linear]):where([data-control=indeterminate]){--_progress-wavelength: var(--md-comp-progress-indicator-linear-indeterminate-active-indicator-wave-wavelength)}.md-progress:where([data-variant=linear]):where([data-shape=wave]){--_progress-height: var(--md-comp-progress-indicator-linear-with-wave-height)}.md-progress:where([data-variant=linear],[data-variant=circular]){--_progress-stop-size: var(--md-comp-progress-indicator-stop-indicator-size);--_progress-track: var(--md-comp-progress-indicator-track-color);--_progress-track-shape: var(--md-comp-progress-indicator-track-shape);--_progress-track-thickness: var(--md-comp-progress-indicator-track-thickness)}.md-progress:where([data-variant=circular]):where([data-size=thick]){--_progress-thickness: var(--md-comp-progress-indicator-circular-thick-active-indicator-thickness);--_progress-size: var(--md-comp-progress-indicator-circular-thick-size);--_progress-track-thickness: var(--md-comp-progress-indicator-circular-thick-track-thickness);--_progress-gap: var(--md-comp-progress-indicator-circular-thick-track-active-indicator-space)}.md-progress:where([data-variant=linear]):where([data-size=thick]){--_progress-thickness: var(--md-comp-progress-indicator-linear-thick-active-indicator-thickness);--_progress-height: var(--md-comp-progress-indicator-linear-thick-height);--_progress-stop-size: var(--md-comp-progress-indicator-linear-thick-stop-indicator-size);--_progress-stop-trailing: var(--md-comp-progress-indicator-linear-thick-stop-indicator-trailing-space);--_progress-track-thickness: var(--md-comp-progress-indicator-linear-thick-track-thickness);--_progress-gap: var(--md-comp-progress-indicator-linear-thick-track-active-indicator-space)}.md-progress:where([data-variant=linear]):where([data-size=thick]):where([data-shape=wave]){--_progress-height: var(--md-comp-progress-indicator-linear-thick-with-wave-height)}