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

.top-products {
  background-color: color('surface');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  padding: spacer('m');
  @include layout-stack('m');

  &__header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
    justify-content: space-between;
  }

  &__title {
    font-size: font-size('h5');
    margin-block: 0;
  }

  &__period {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
  }

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

  &__item {
    align-items: center;
    column-gap: spacer('s');
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    row-gap: spacer('xxs');
  }

  &__thumb {
    aspect-ratio: 1;
    background-color: color('surface-muted');
    border-radius: radius('md');
    grid-row: span 2;
    inline-size: 100%;
    object-fit: cover;
  }

  &__info,
  &__numbers {
    @include layout-stack(0);
  }

  &__numbers {
    text-align: end;
  }

  &__name {
    font-weight: 700;

    a {
      color: color('heading');
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__meta,
  &__share {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  &__revenue {
    color: color('heading');
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  // The share of the revenue: a thin bar under the name, in the primary color.
  &__bar {
    background-color: color('surface-muted');
    block-size: 0.375rem;
    border-radius: radius('pill');
    grid-column: 2 / -1;
    overflow: hidden;

    &::before {
      background-color: color('primary');
      block-size: 100%;
      border-radius: radius('pill');
      content: '';
      display: block;
      inline-size: calc(var(--share) * 1%);
    }
  }
}

<section class="top-products" aria-labelledby="top-products-title">
    <header class="top-products__header">
        <h2 class="top-products__title" id="top-products-title">Top products</h2>
        <p class="top-products__period">Last 30 days</p>
    </header>
    <ol class="top-products__list" role="list">
        <li class="top-products__item">
            <img class="top-products__thumb" src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <div class="top-products__info">
                <p class="top-products__name"><a href="#">Everyday Backpack</a></p>
                <p class="top-products__meta">Bags · 412 sold</p>
            </div>
            <div class="top-products__numbers">
                <p class="top-products__revenue">$36,668</p>
                <p class="top-products__share">28%<span class="sr-only"> of the revenue</span></p>
            </div>
            <span class="top-products__bar" style="--share: 28;" aria-hidden="true"></span>
        </li>
        <li class="top-products__item">
            <img class="top-products__thumb" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <div class="top-products__info">
                <p class="top-products__name"><a href="#">Wireless Headphones</a></p>
                <p class="top-products__meta">Tech · 189 sold</p>
            </div>
            <div class="top-products__numbers">
                <p class="top-products__revenue">$30,051</p>
                <p class="top-products__share">23%<span class="sr-only"> of the revenue</span></p>
            </div>
            <span class="top-products__bar" style="--share: 23;" aria-hidden="true"></span>
        </li>
        <li class="top-products__item">
            <img class="top-products__thumb" src="https://images.unsplash.com/photo-1547949003-9792a18a2601?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <div class="top-products__info">
                <p class="top-products__name"><a href="#">Leather Weekender</a></p>
                <p class="top-products__meta">Bags · 98 sold</p>
            </div>
            <div class="top-products__numbers">
                <p class="top-products__revenue">$24,402</p>
                <p class="top-products__share">19%<span class="sr-only"> of the revenue</span></p>
            </div>
            <span class="top-products__bar" style="--share: 19;" aria-hidden="true"></span>
        </li>
        <li class="top-products__item">
            <img class="top-products__thumb" src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <div class="top-products__info">
                <p class="top-products__name"><a href="#">Ceramic Pour-Over</a></p>
                <p class="top-products__meta">Home · 238 sold</p>
            </div>
            <div class="top-products__numbers">
                <p class="top-products__revenue">$9,996</p>
                <p class="top-products__share">8%<span class="sr-only"> of the revenue</span></p>
            </div>
            <span class="top-products__bar" style="--share: 8;" aria-hidden="true"></span>
        </li>
        <li class="top-products__item">
            <img class="top-products__thumb" src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <div class="top-products__info">
                <p class="top-products__name"><a href="#">Desk Lamp</a></p>
                <p class="top-products__meta">Home · 77 sold</p>
            </div>
            <div class="top-products__numbers">
                <p class="top-products__revenue">$6,083</p>
                <p class="top-products__share">5%<span class="sr-only"> of the revenue</span></p>
            </div>
            <span class="top-products__bar" style="--share: 5;" aria-hidden="true"></span>
        </li>
    </ol>
</section>