.lio-stepper {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  max-inline-size: 750px;
  min-inline-size: var(--space-zero);
  min-block-size: calc(var(--control-h-sm) + var(--border-w-2));
  margin: var(--space-zero);
  padding: var(--space-zero);
  gap: var(--space-zero);
  overflow-x: auto;
  list-style: none;
  color: var(--text-disabled);
  font: 600 14px/normal var(--font-geist);
  scrollbar-width: none;
}

.lio-stepper::-webkit-scrollbar {
  display: none;
}

.lio-stepper__item {
  display: flex;
  min-inline-size: var(--space-zero);
  flex: 1 1 var(--space-zero);
  align-items: stretch;
}

.lio-stepper__item:last-child {
  flex: 0 0 auto;
}

.lio-stepper__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-block-size: calc(var(--control-h-sm) + var(--border-w-2));
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-disabled);
  font: inherit;
  line-height: normal;
  white-space: nowrap;
  word-break: break-word;
}

.lio-stepper__button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.lio-stepper__button:focus-visible {
  outline: none;
  box-shadow: var(--ring-brand);
}

.lio-stepper__item[data-state="active"] .lio-stepper__label {
  background: var(--brand-surface);
  color: var(--text-brand-secondary);
}

.lio-stepper__item[data-state="success"] .lio-stepper__label {
  background: var(--success-bg);
  color: var(--success-text);
}

.lio-stepper__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1 1 var(--size-4xl);
  min-inline-size: var(--size-4xl);
  padding: var(--space-xs);
}

.lio-stepper__separator::before {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: var(--border-w);
  background: var(--text-disabled);
}