.step-indicator {
  --step-indicator-dot-size: 4rem;
  --step-indicator-line-min: 1.2rem;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-indicator__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.step-indicator__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--step-indicator-dot-size);
  height: var(--step-indicator-dot-size);
  padding: 0;
  border: 0.2rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  background-color: transparent;
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .step-indicator__dot:hover {
    border-color: rgba(var(--color-foreground), 0.3);
  }
}
.step-indicator__dot[aria-current=step] {
  border-color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  cursor: default;
}
.step-indicator__line {
  flex: 1 1 auto;
  background-image: repeating-linear-gradient(var(--step-indicator-line-direction, to right), rgba(var(--color-foreground), 0.3) 0 0.3rem, transparent 0.3rem 0.6rem);
}
.step-indicator--horizontal {
  box-sizing: content-box;
  width: 100%;
  margin: -0.6rem;
  padding: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.step-indicator--horizontal::-webkit-scrollbar {
  display: none;
}
.step-indicator--horizontal .step-indicator__item:first-child {
  margin-inline-start: auto;
}
.step-indicator--horizontal .step-indicator__item:last-child {
  margin-inline-end: auto;
}
.step-indicator--horizontal .step-indicator__item:not(:last-child) {
  flex: 0 1 calc(var(--step-indicator-dot-size) + var(--step-indicator-line-max, 7.4rem));
  min-width: calc(var(--step-indicator-dot-size) + var(--step-indicator-line-min));
}
.step-indicator--horizontal .step-indicator__line {
  height: 0.1rem;
}
.step-indicator--vertical {
  --step-indicator-line-direction: to bottom;
  flex-direction: column;
}
.step-indicator--vertical .step-indicator__item {
  flex-direction: column;
}
.step-indicator--vertical .step-indicator__item:not(:last-child) {
  flex: 1 1 auto;
}
.step-indicator--vertical .step-indicator__line {
  width: 0.1rem;
  min-height: var(--step-indicator-line-min);
}

[data-edge-fade] {
  --edge-fade: 3.2rem;
  --edge-fade-start: to right;
  --edge-fade-end: to left;
}
[data-edge-fade].is-scrollable-start {
  mask-image: linear-gradient(var(--edge-fade-start), transparent, #000 var(--edge-fade));
}
[data-edge-fade].is-scrollable-end {
  mask-image: linear-gradient(var(--edge-fade-end), transparent, #000 var(--edge-fade));
}
[data-edge-fade].is-scrollable-start.is-scrollable-end {
  mask-image: linear-gradient(var(--edge-fade-start), transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent);
}

[data-edge-fade].is-dragging {
  scroll-snap-type: none;
  user-select: none;
  cursor: grabbing;
}

[dir=rtl] [data-edge-fade] {
  --edge-fade-start: to left;
  --edge-fade-end: to right;
}