.cobalt-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 32rem;

  --steps-indicator-size: 12px;
  --steps-separator-thickness: 1px;

  @apply c-px-2xs c-py-xs;
}

.cobalt-steps__item {
  @apply c-pb-sm c-text-body-sm;
  position: relative;

  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  gap: 0.75rem;

  &:last-of-type {
    @apply c-pb-none;

    flex: initial;

    & [data-part="separator"] {
      display: none;
    }
  }
}

.cobalt-steps__item__wrapper {
  display: flex;

  align-items: flex-start;

  gap: 0.75rem;
}

.cobalt-steps__item__content {
  @apply c-gap-2xs;

  display: flex;
  flex-direction: column;
}

.cobalt-steps__item__indicator {
  @apply c-border c-border-outline c-rounded-full c-bg-surfaceBright;

  display: flex;

  width: var(--steps-indicator-size);
  height: var(--steps-indicator-size);

  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.cobalt-steps__item__separator {
  @apply c-bg-outline;

  position: absolute;
  top: calc(var(--steps-indicator-size));
  left: calc(var(--steps-indicator-size) / 2 - 0.5px);

  flex: 1;

  width: var(--steps-separator-thickness);
  height: 100%;

  max-height: calc(100% - var(--steps-indicator-size));

  margin-inline: 0;
}

.cobalt-steps__item__label {
  @apply c--mt-2xs;
}

.cobalt-steps__item.cobalt-steps__item--important .cobalt-steps__item__label {
  @apply c-font-bold;
}

.cobalt-steps__item__description {
  @apply c-text-onSurfaceVariant;
}