.stepper {
  --stepper-dimensions: 32px;
  --stepper-width: 100%;
  --stepper-gap: 8px;

  display: flex;
  flex-direction: column;
  gap: var(--stepper-gap);

  &__steps {
    display: flex;
    gap: var(--stepper-gap);
    align-items: stretch;
  }

  &__summary {
    display: flex;
    gap: 4px;
  }

  &__separator {
    flex: 1 1 0px;
    align-self: center;
    height: 1px;
    background: rgb(var(--border--neutral-low-default--light));
  }

  .typography {
    margin-bottom: 0;
    text-wrap: nowrap;
  }

  &__item {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: var(--stepper-gap);
    align-items: center;

    .icon {
      color: transparent;
      border: 1px solid rgb(var(--border--neutral-low-default--light));
      border-radius: 9999px;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;

    min-width: var(--stepper-dimensions);
    min-height: var(--stepper-dimensions);

    border-radius: 9999px;
  }

  &__item--completed .icon {
    color: rgb(var(--foreground--controls-medium-selected--light));
    background: rgb(var(--background--controls-low-default--light));
  }

  &__item--active &__icon {
    border: 1px solid rgb(var(--border--controls-medium-selected--light));
  }

  &__item--active .icon {
    background: rgb(var(--background--controls-medium-selected--light));
    border-radius: 9999px;
  }

  &__item &__label {
    display: none;
  }

  &__label {
    .typography {
      flex-grow: 1;
      text-wrap: balance;
    }
  }

  &__labelPrefix {
    .typography {
      color: rgb(var(--foreground--neutral-high-default--light));
    }
  }

  @media @screen-lg {
    padding-top: 16px;
    padding-bottom: 16px;

    &__summary {
      pointer-events: none;
      visibility: hidden;
      opacity: var(--blend--full--light);
    }

    &__item {
      flex: 1 1 0px;

      &:not(:last-child)::before {
        content: '';

        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% + var(--stepper-dimensions) - var(--stepper-gap));

        display: block;

        width: calc(100% - var(--stepper-dimensions));
        height: 1px;
        margin-top: calc(var(--stepper-dimensions) / 2);
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;

        background-color: rgb(var(--border--neutral-low-default--light));
      }
    }

    &__separator {
      flex: 0;
    }

    &__item &__label {
      display: unset;
      text-align: center;

      .typography {
        text-align: center;
      }
    }

    &__labelPrefix {
      display: none;
    }
  }
}