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

.l-changelog {
  @include clear-list;
  @include layout-stack('l');

  &__item {
    align-items: start;
    display: grid;
    gap: spacer('s') spacer('l');
    grid-template-columns: minmax(0, 1fr);

    @include breakpoint('md') {
      grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    }

    + .l-changelog__item {
      border-block-start: config('border-width-base', $display) solid color('border');
      padding-block-start: spacer('l');
    }
  }

  &__date {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    font-variant-numeric: tabular-nums;
    font-weight: 700;

    @include breakpoint('md') {
      inset-block-start: spacer('m');
      position: sticky;
    }
  }

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

  &__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: font-size('h3');
    gap: spacer('xs');
    margin-block: 0;
  }

  &__latest {
    background-color: color('primary');
    border-radius: radius('pill');
    color: color('primary-foreground', 'btn');
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 0.7em;
  }

  &__list {
    list-style: none;
    padding: 0;
    @include layout-stack('xs');
  }

  &__tag {
    border-radius: radius('sm');
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-inline-end: spacer('xxs');
    min-inline-size: 6.5rem;
    padding: 0.15em 0.5em;
    text-align: center;

    &--added { background-color: color-alpha('success', 0.12, 'alert');
      color: color('success', 'alert'); }

    &--changed { background-color: color-alpha('primary', 0.12);
      color: color('primary'); }

    &--deprecated,
    &--security { background-color: color-alpha('warning', 0.15, 'alert');
      color: color('warning', 'alert'); }

    &--fixed { background-color: color-alpha('info', 0.12, 'alert');
      color: color('info', 'alert'); }

    &--removed { background-color: color-alpha('danger', 0.12, 'alert');
      color: color('danger', 'alert'); }
  }

  &__link {
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
  }
}

<ol class="l-changelog" reversed>
    <li class="l-changelog__item" aria-labelledby="release-v3-0-0">
        <time class="l-changelog__date" datetime="2026-10-01">Oct 1, 2026</time>
        <div class="l-changelog__body">
            <h2 class="l-changelog__title" id="release-v3-0-0">v3.0.0 <span class="l-changelog__latest">Latest</span></h2>
            <ul class="l-changelog__list">
                <li><span class="l-changelog__tag l-changelog__tag--added">Added</span> Design styles: switch the whole look with one <code>data-spruce-style</code> attribute.</li>
                <li><span class="l-changelog__tag l-changelog__tag--added">Added</span> Built-in dark mode that can follow the system preference.</li>
                <li><span class="l-changelog__tag l-changelog__tag--changed">Changed</span> The form controls use <code>block-size</code> instead of <code>height</code>.</li>
                <li><span class="l-changelog__tag l-changelog__tag--fixed">Fixed</span> The select icon in right-to-left layouts.</li>
            </ul>
            <p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v3.0.0</a></p>
        </div>
    </li>
    <li class="l-changelog__item" aria-labelledby="release-v2-4-0">
        <time class="l-changelog__date" datetime="2026-03-12">Mar 12, 2026</time>
        <div class="l-changelog__body">
            <h2 class="l-changelog__title" id="release-v2-4-0">v2.4.0</h2>
            <ul class="l-changelog__list">
                <li><span class="l-changelog__tag l-changelog__tag--added">Added</span> The <code>layout-cluster()</code> mixin.</li>
                <li><span class="l-changelog__tag l-changelog__tag--deprecated">Deprecated</span> The <code>$btn-font-family</code> variable; use the <code>$btn</code> map.</li>
            </ul>
            <p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v2.4.0</a></p>
        </div>
    </li>
    <li class="l-changelog__item" aria-labelledby="release-v2-3-1">
        <time class="l-changelog__date" datetime="2025-11-03">Nov 3, 2025</time>
        <div class="l-changelog__body">
            <h2 class="l-changelog__title" id="release-v2-3-1">v2.3.1</h2>
            <ul class="l-changelog__list">
                <li><span class="l-changelog__tag l-changelog__tag--fixed">Fixed</span> The focus ring of the outline buttons in Safari.</li>
                <li><span class="l-changelog__tag l-changelog__tag--security">Security</span> Updated the build dependencies.</li>
            </ul>
            <p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v2.3.1</a></p>
        </div>
    </li>
</ol>