Untitled

{% if product.available %}

<div class="instock-pulse">
  <span class="icon--pulsing {% if product.variants.first.inventory_quantity <= 12 %}low-stock{% endif %}"></span>
  <span class="stock-message">
    {% if product.variants.first.inventory_quantity <= 12 %}
      Kun {{ product.variants.first.inventory_quantity }} tilbage på lager!
    {% else %}
      På lager - klar til levering
    {% endif %}
  </span>
</div>

<style>

.instock-pulse {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.icon--pulsing {
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.icon--pulsing:after, 
.icon--pulsing:before {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    margin: 5px;
}

/* Standard farve (grøn) */
.icon--pulsing:after,
.icon--pulsing:before {
    background: #54c63a;
}

/* Orange farve ved lav lagerbeholdning */
.icon--pulsing.low-stock:after,
.icon--pulsing.low-stock:before {
    background: #ffa500; /* Orange farve */
}

@keyframes inventory-pulse{
  0%{
    opacity:0.5;
  }
  to{
    transform:scale(2.5);
    opacity:0;
  }
}

.icon--pulsing:before {
    animation: inventory-pulse 2s linear infinite;
}

</style>

{% endif %}