@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">
            <strong>50 €</strong>
        </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 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' class='btn__icon'>
                    <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 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' class='btn__icon'>
                    <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 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' class='btn__icon'>
            <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">
            <strong>100 €</strong>
        </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 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' class='btn__icon'>
                    <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 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' class='btn__icon'>
                    <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 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' class='btn__icon'>
            <line x1='18' y1='6' x2='6' y2='18'></line>
            <line x1='6' y1='6' x2='18' y2='18'></line>
        </svg>
    </button>
</div>