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

.order-card {
  $this: &;

  align-items: center;
  background-color: color('background');
  border: 1px solid color('border');
  border-radius: config('border-radius-lg', $display);
  color: color('heading');
  display: flex;
  gap: spacer('m');
  justify-content: space-between;
  padding: spacer-clamp('s', 'm');
  text-decoration: none;

  &__title {
    font-size: font-size('h4');
  }

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

    &:hover,
    &:focus {
      color: color('primary');
    }
  }

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

  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s') spacer('m');
  }
}

<div class="order-card">
    <div class="order-card__data">
        <h3 class="order-card__title">
            <a class="order-card__link" href="#">WooCommerce SimplePay integration for 3 websites</a>
        </h3>
        <div class="order-card__meta">
            50 €
        </div>
        <div class="number-group" x-cloak x-data="{ quantity: 2, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
            <button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
            <input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max"/>
            <button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line class="vertical-line" x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
        </div>
    </div>
    <button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
<div class="order-card">
    <div class="order-card__data">
        <h3 class="order-card__title">
            <a class="order-card__link" href="#">Root SEO extension for 1 website</a>
        </h3>
        <div class="order-card__meta">
            100 €
        </div>
        <div class="number-group" x-cloak x-data="{ quantity: 1, min: 1, max: 99 }" x-init="$watch('quantity', (value) => { quantity = value < min ? min : (value > max ? max : value) })">
            <button class="btn btn--primary btn--sm btn--icon number-group__decrement" type="button" data-action="decrement" aria-label="Decrement quantity" @click="quantity = Math.max(min, --quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
            <input class="number-group__input" x-model="quantity" type="number" :min="min" :max="max"/>
            <button class="btn btn--primary btn--sm btn--icon number-group__increment" type="button" data-action="increment" aria-label="Increment quantity" @click="quantity = Math.min(max, ++quantity)">
                <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <line class="vertical-line" x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
            </button>
        </div>
    </div>
    <button class="btn btn--primary btn--sm btn--icon order-card__remove" type="button" aria-label="Delete product">
        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>