:host {
  position: relative;
  flex: 2;
  display: flex;
  align-items: center;
  /**
   * @prop --stepper-text-color: Steps font color
   * @prop --stepper-text-color-ongoing: Ongoing step font color
   * @prop --stepper-text-color-completed: Completed steps font color
   * @prop --stepper-border-color: Default steps border color
   * @prop --stepper-border-color-filled: Filled steps border color
   * @prop --stepper-label-padding-left: Padding left on label
   * @prop --stepper-label-padding-right: Padding right on label
   */
  --stepper-text-color: var(--joy-color-neutral-40);
  --stepper-text-color-ongoing: var(--joy-color-secondary-30);
  --stepper-text-color-completed: var(--joy-color-neutral-60);
  --stepper-border-color: var(--joy-color-neutral-30);
  --stepper-border-color-filled: var(--joy-color-secondary-50);
  --stepper-label-padding-left: var(--joy-core-spacing-10);
  --stepper-label-padding-right: 0;
}
@media screen and (max-width: 991px) {
  :host {
    --stepper-label-padding-left: var(--joy-core-spacing-4);
  }
}

.joy-step {
  display: flex;
  flex-direction: column;
  flex: 1 0;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  position: relative;
  color: var(--stepper-text-color);
  word-break: break-word;
  font-family: var(--joy-font-family-base);
  font-size: var(--joy-font-size-primary-300);
  font-weight: 700;
}
.joy-step--size-small {
  font-size: var(--joy-font-size-primary-200);
}
.joy-step__stroke {
  height: 8px;
  background-color: var(--stepper-border-color);
  width: 100%;
  margin-bottom: var(--joy-core-spacing-2);
  box-sizing: border-box;
}
.joy-step__stroke--filled {
  height: 8px;
  background-color: var(--stepper-border-color-filled);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
}
.joy-step__label {
  padding-right: var(--stepper-label-padding-right);
  padding-left: var(--stepper-label-padding-left);
}
.joy-step--ongoing {
  color: var(--stepper-text-color-ongoing);
}
.joy-step--ongoing .joy-step__stroke--filled {
  transition: max-width var(--joy-transition-duration-long) var(--joy-transition-timing-function);
}
.joy-step--completed {
  color: var(--stepper-text-color-completed);
}