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

.stock-alerts {
  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: center;
    display: flex;
    gap: spacer('xs');
  }

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

  &__list {
    list-style: none;
    padding: 0;
  }

  &__item {
    --stock-alerts-color: #{color('warning', 'alert')};
    align-items: center;
    border-block-start: config('border-width-base', $display) solid color('border');
    display: flex;
    gap: spacer('s');
    padding-block: spacer('s');

    &:first-child {
      border-block-start: 0;
      padding-block-start: 0;
    }

    &--out {
      --stock-alerts-color: #{color('danger', 'alert')};
    }
  }

  &__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--stock-alerts-color) 14%, transparent);
    block-size: 2.25rem;
    border-radius: radius('md');
    color: var(--stock-alerts-color);
    display: flex;
    flex-shrink: 0;
    inline-size: 2.25rem;
    justify-content: center;

    .block-icon {
      block-size: 1.1rem;
      inline-size: 1.1rem;
    }
  }

  &__info {
    flex-grow: 1;
    min-inline-size: 0;
    @include layout-stack(0);
  }

  &__name {
    color: color('heading');
    font-weight: 600;
  }

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

  &__status {
    color: color('heading');
    font-weight: 600;
  }
}

<section class="stock-alerts" aria-labelledby="stock-alerts-title">
    <header class="stock-alerts__header">
        <h2 class="stock-alerts__title" id="stock-alerts-title">Stock alerts</h2>
        <span class="badge badge--danger">4<span class="sr-only"> products need attention</span></span>
    </header>
    <ul class="stock-alerts__list" role="list">
        <li class="stock-alerts__item stock-alerts__item--out">
            <span class="stock-alerts__icon" aria-hidden="true"><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="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/>
</svg>
</span>
            <div class="stock-alerts__info">
                <p class="stock-alerts__name">Linen Overshirt, M</p>
                <p class="stock-alerts__meta"><span class="stock-alerts__status">Out of stock</span> · SKU LO-SAND-M</p>
            </div>
            <a class="btn btn--soft-primary btn--sm" href="#">Restock<span class="sr-only"> Linen Overshirt, M</span></a>
        </li>
        <li class="stock-alerts__item stock-alerts__item--low">
            <span class="stock-alerts__icon" aria-hidden="true"><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="M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
</svg>
</span>
            <div class="stock-alerts__info">
                <p class="stock-alerts__name">Everyday Backpack, Olive</p>
                <p class="stock-alerts__meta"><span class="stock-alerts__status">Low stock: 3 left</span> · SKU EB-OLV-22</p>
            </div>
            <a class="btn btn--soft-primary btn--sm" href="#">Restock<span class="sr-only"> Everyday Backpack, Olive</span></a>
        </li>
        <li class="stock-alerts__item stock-alerts__item--low">
            <span class="stock-alerts__icon" aria-hidden="true"><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="M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
</svg>
</span>
            <div class="stock-alerts__info">
                <p class="stock-alerts__name">Ceramic Pour-Over</p>
                <p class="stock-alerts__meta"><span class="stock-alerts__status">Low stock: 5 left</span> · SKU CP-WHT-01</p>
            </div>
            <a class="btn btn--soft-primary btn--sm" href="#">Restock<span class="sr-only"> Ceramic Pour-Over</span></a>
        </li>
        <li class="stock-alerts__item stock-alerts__item--out">
            <span class="stock-alerts__icon" aria-hidden="true"><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="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/>
</svg>
</span>
            <div class="stock-alerts__info">
                <p class="stock-alerts__name">Sunglasses, Tortoise</p>
                <p class="stock-alerts__meta"><span class="stock-alerts__status">Out of stock</span> · SKU SG-TRT-01</p>
            </div>
            <a class="btn btn--soft-primary btn--sm" href="#">Restock<span class="sr-only"> Sunglasses, Tortoise</span></a>
        </li>
    </ul>
</section>