@use 'sprucecss/scss/spruce' as *;

.steps-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__list {
    @include clear-list;
    display: grid;
    gap: spacer('l');

    @include breakpoint('md') {
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
    }

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
      padding-block: 0;
    }
  }

  &__step {
    position: relative;
    text-align: center;
    @include layout-stack('xs');

    @include breakpoint('md') {
      &:not(:last-child)::after {
        border-block-start: 2px dashed color('border-strong');
        content: '';
        inline-size: calc(100% - 2rem);
        inset-block-start: 2rem;
        inset-inline-start: calc(50% + 2.5rem);
        position: absolute;
      }
    }
  }

  &__marker {
    align-items: center;
    background-color: color('surface');
    block-size: 4rem;
    border: config('border-width-base', $display) solid color('border');
    border-radius: 50%;
    box-shadow: shadow('sm');
    color: color('primary');
    display: inline-flex;
    inline-size: 4rem;
    justify-content: center;
    position: relative;

    svg {
      block-size: 1.5rem;
      inline-size: 1.5rem;
    }
  }

  &__number {
    align-items: center;
    background-color: color('primary');
    block-size: 1.5rem;
    border-radius: 50%;
    color: color('primary-foreground', 'btn');
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    inline-size: 1.5rem;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    justify-content: center;
    position: absolute;
  }

  &__title {
    font-size: font-size('h4');
    margin-block-start: spacer('s') !important;
  }

  &__text {
    color: color('muted');
    margin-inline: auto;
    max-inline-size: 22rem;
  }
}

<section class="steps-block" aria-labelledby="steps-title">
    <div class="container">
        <div class="steps-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">How it works</p>
                <h2 class="block-heading__title" id="steps-title">From install to launch in three steps</h2>
                <p class="block-heading__text">No build system lock-in. Just Sass and your favorite tools.</p>
            </header>
            <ol class="steps-block__list" role="list">
                <li class="steps-block__step">
                    <span class="steps-block__marker">
                        <svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                        <path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>
                        </svg>
                        <span class="steps-block__number" aria-hidden="true">1</span>
                    </span>
                    <h3 class="steps-block__title"><span class="sr-only">Step 1: </span>Install</h3>
                    <p class="steps-block__text">Add the npm package and import Spruce in your Sass entry file.</p>
                </li>
                <li class="steps-block__step">
                    <span class="steps-block__marker">
                        <svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                        <circle cx="13.5" cy="6.5" r="1"/><circle cx="17.5" cy="10.5" r="1"/><circle cx="8.5" cy="7.5" r="1"/><circle cx="6.5" cy="12.5" r="1"/><path d="M12 2a10 10 0 0 0 0 20 1.7 1.7 0 0 0 1.2-2.9 1.6 1.6 0 0 1 1.2-2.8h2A5.6 5.6 0 0 0 22 10.8C22 6 17.5 2 12 2z"/>
                        </svg>
                        <span class="steps-block__number" aria-hidden="true">2</span>
                    </span>
                    <h3 class="steps-block__title"><span class="sr-only">Step 2: </span>Configure</h3>
                    <p class="steps-block__text">Set your colors, fonts and tokens, or pick a design style.</p>
                </li>
                <li class="steps-block__step">
                    <span class="steps-block__marker">
                        <svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                        <path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1z"/><path d="M12 15 9 12a22 22 0 0 1 2-4A13 13 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2z"/><path d="M9 12H4s.6-3 2-4c1.6-1.1 5 0 5 0"/><path d="M12 15v5s3-.6 4-2c1.1-1.6 0-5 0-5"/>
                        </svg>
                        <span class="steps-block__number" aria-hidden="true">3</span>
                    </span>
                    <h3 class="steps-block__title"><span class="sr-only">Step 3: </span>Ship</h3>
                    <p class="steps-block__text">Build pages with the elements and copy-paste components.</p>
                </li>
            </ol>
        </div>
    </div>
</section>