@layer starlight.components {
  .sl-steps {
    --bullet-size: calc(var(--sl-line-height) * 1rem);
    --bullet-margin: .375rem;
    counter-reset: steps-counter var(--sl-steps-start, 0);
    padding-inline-start: 0;
    list-style: none;
  }

  .sl-steps > li {
    counter-increment: steps-counter;
    min-height: calc(var(--bullet-size) + var(--bullet-margin));
    padding-inline-start: calc(var(--bullet-size) + 1rem);
    padding-bottom: 1px;
    position: relative;
  }

  .sl-steps > li + li {
    margin-top: 0;
  }

  .sl-steps > li:before {
    content: counter(steps-counter);
    width: var(--bullet-size);
    height: var(--bullet-size);
    line-height: var(--bullet-size);
    font-size: var(--sl-text-xs);
    text-align: center;
    color: var(--sl-color-white);
    background-color: var(--sl-color-gray-6);
    box-shadow: inset 0 0 0 1px var(--sl-color-gray-5);
    top: 0;
    border-radius: 99rem;
    font-weight: 600;
    position: absolute;
    inset-inline-start: 0;
  }

  .sl-steps > li:after {
    --guide-width: 1px;
    content: "";
    top: calc(var(--bullet-size) + var(--bullet-margin));
    bottom: var(--bullet-margin);
    width: var(--guide-width);
    background-color: var(--sl-color-hairline-light);
    position: absolute;
    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
  }
}

@layer starlight.content {
  .sl-steps > li > :first-child {
    --lh: calc(1em * var(--sl-line-height));
    --shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));
    transform: translateY(var(--shift-y));
    margin-bottom: var(--shift-y);
  }

  .sl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
    --lh: calc(1em * var(--sl-line-height-headings));
  }

  @supports (--prop: 1lh) {
    .sl-steps > li > :first-child {
      --lh: 1lh;
    }
  }
}