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

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

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
    margin-inline: auto;
    max-inline-size: 52rem;

    > * {
      margin: 0 !important;
    }
  }

  // The markers are joined by a line, like a timeline.
  &__steps {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__step {
    display: grid;
    gap: spacer('m');
    grid-template-columns: 2.5rem minmax(0, 1fr);
    margin: 0 !important;
    padding-block-end: spacer('l');
    position: relative;

    &:not(:last-child)::before {
      background-color: color('border');
      content: '';
      inline-size: 2px;
      inset-block: 2.75rem 0.25rem;
      inset-inline-start: calc(1.25rem - 1px);
      position: absolute;
    }

    &:last-child {
      padding-block-end: 0;
    }
  }

  &__marker {
    align-items: center;
    background-color: color('primary');
    block-size: 2.5rem;
    border-radius: radius('pill');
    color: color('primary-foreground', 'btn');
    display: flex;
    font-weight: 700;
    justify-content: center;
  }

  &__body {
    @include layout-stack('xs');

    .copy-field {
      margin-block-start: spacer('s');
    }

    .copy-field__input {
      font-family: config('font-family-mono', $typography);
      font-size: config('font-size-sm', $typography);
    }
  }

  &__title {
    font-size: font-size('h5');
    padding-block-start: 0.4rem;
  }

  &__text {
    color: color('muted');
  }

  &__links {
    display: grid;
    gap: spacer('s');
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    list-style: none;
    padding: 0;

    li {
      display: flex;
      margin: 0;
    }

    a {
      background-color: color('surface');
      border: config('border-width-base', $display) solid color('border');
      border-radius: radius('lg');
      color: color('muted');
      display: block;
      font-size: config('font-size-sm', $typography);
      inline-size: 100%;
      padding: spacer('s') spacer('m');
      text-decoration: none;
      @include transition($property: 'border-color');

      &:hover {
        border-color: color('primary');

        strong {
          color: color('primary');
        }
      }
    }

    strong {
      color: color('heading');
      display: block;
      font-size: config('font-size-base', $typography);
    }

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

<section class="quick-start-block" aria-labelledby="quick-start-title">
    <div class="container">
        <div class="quick-start-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Quick start</p>
                <h2 class="block-heading__title" id="quick-start-title">Up and running in three steps</h2>
                <p class="block-heading__text">No build step required to try it; add Sass when you want to customize.</p>
            </header>
            <ol class="quick-start-block__steps" role="list">
                <li class="quick-start-block__step">
                    <span class="quick-start-block__marker" aria-hidden="true">1</span>
                    <div class="quick-start-block__body">
                        <h3 class="quick-start-block__title"><span class="sr-only">Step 1: </span>Install the package</h3>
                        <p class="quick-start-block__text">Add Spruce CSS to your project with npm.</p>
                        <div class="copy-field">
                            <label class="sr-only" for="quick-start-command-1">Install command</label>
                            <div class="form-group--stacked">
                                <input class="form-control copy-field__input" id="quick-start-command-1" type="text" value="npm install sprucecss" readonly spellcheck="false">
                                <button class="btn btn--primary copy-button" type="button" data-copy-target="quick-start-command-1">
                                    <svg class="btn__icon copy-button__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"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                    <span class="copy-button__label">Copy</span><span class="sr-only"> install command</span>
                                </button>
                            </div>
                            <p class="sr-only" aria-live="polite" data-copy-status></p>
                        </div>
                    </div>
                </li>
                <li class="quick-start-block__step">
                    <span class="quick-start-block__marker" aria-hidden="true">2</span>
                    <div class="quick-start-block__body">
                        <h3 class="quick-start-block__title"><span class="sr-only">Step 2: </span>Use it in your Sass</h3>
                        <p class="quick-start-block__text">Load the module and generate the styles with your settings.</p>
                        <div class="copy-field">
                            <label class="sr-only" for="quick-start-command-2">Sass</label>
                            <div class="form-group--stacked">
                                <input class="form-control copy-field__input" id="quick-start-command-2" type="text" value="@use &#39;sprucecss/scss/spruce&#39; with ($settings: (&#39;css-custom-properties&#39;: true));" readonly spellcheck="false">
                                <button class="btn btn--primary copy-button" type="button" data-copy-target="quick-start-command-2">
                                    <svg class="btn__icon copy-button__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"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                    <span class="copy-button__label">Copy</span><span class="sr-only"> sass</span>
                                </button>
                            </div>
                            <p class="sr-only" aria-live="polite" data-copy-status></p>
                        </div>
                    </div>
                </li>
                <li class="quick-start-block__step">
                    <span class="quick-start-block__marker" aria-hidden="true">3</span>
                    <div class="quick-start-block__body">
                        <h3 class="quick-start-block__title"><span class="sr-only">Step 3: </span>Pick a design style</h3>
                        <p class="quick-start-block__text">Switch the whole look with one attribute on any element.</p>
                        <div class="copy-field">
                            <label class="sr-only" for="quick-start-command-3">HTML</label>
                            <div class="form-group--stacked">
                                <input class="form-control copy-field__input" id="quick-start-command-3" type="text" value="&lt;html data-spruce-style=&quot;minimal&quot;&gt;" readonly spellcheck="false">
                                <button class="btn btn--primary copy-button" type="button" data-copy-target="quick-start-command-3">
                                    <svg class="btn__icon copy-button__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"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                    <span class="copy-button__label">Copy</span><span class="sr-only"> html</span>
                                </button>
                            </div>
                            <p class="sr-only" aria-live="polite" data-copy-status></p>
                        </div>
                    </div>
                </li>
            </ol>
            <aside class="callout callout--tip" aria-label="Tip">
                <svg class="callout__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="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/></svg>
                <div class="callout__content">
                    <p class="callout__title">Tip</p>
                    <p>Prefer plain CSS? Link spruce.complete.css from a CDN and skip the first two steps.</p>
                </div>
            </aside>
            <ul class="quick-start-block__links" role="list">
                <li><a href="#"><strong>Read the docs <span aria-hidden="true">→</span></strong> <span>Settings, tokens and every mixin.</span></a></li>
                <li><a href="#"><strong>Browse components <span aria-hidden="true">→</span></strong> <span>170+ copy-paste ready pieces.</span></a></li>
                <li><a href="#"><strong>Start from a page <span aria-hidden="true">→</span></strong> <span>Complete templates to adapt.</span></a></li>
            </ul>
        </div>
    </div>
</section>