.purchase-button,
.product-wishlist-button,
.newsletter button,
.cookie-notice button,
.bag-drawer button,
.checkout-submit,
.contact-form button[type="submit"],
.sizes button,
.choice-wrap,
.product-gallery-arrow,
.product-gallery-dot,
.carousel-dot {
    transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.purchase-button:active:not(:disabled),
.product-wishlist-button:active:not(:disabled),
.newsletter button:active:not(:disabled),
.cookie-notice button:active:not(:disabled),
.bag-drawer button:active:not(:disabled),
.checkout-submit:active:not(:disabled),
.contact-form button[type="submit"]:active:not(:disabled),
.sizes button:active:not(:disabled),
.choice-wrap:active:not(:disabled),
.product-gallery-arrow:active:not(:disabled),
.product-gallery-dot:active:not(:disabled),
.carousel-dot:active:not(:disabled) {
    transform: scale(.97);
}

.purchase-button.is-loading,
.newsletter button.is-loading,
.checkout-submit.is-loading,
.contact-form button[type="submit"].is-loading {
    position: relative;
    padding-right: 48px;
    cursor: progress;
}

.purchase-button.is-loading::after,
.newsletter button.is-loading::after,
.checkout-submit.is-loading::after,
.contact-form button[type="submit"].is-loading::after {
    position: absolute;
    right: 18px;
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: yan-button-spin 700ms linear infinite;
}

.purchase-button.is-complete,
.newsletter button.is-complete,
.checkout-submit.is-complete,
.contact-form button[type="submit"].is-complete {
    position: relative;
    padding-right: 42px;
    background-color: var(--soft);
    color: var(--ink);
}

.purchase-button.is-complete::after,
.newsletter button.is-complete::after,
.checkout-submit.is-complete::after,
.contact-form button[type="submit"].is-complete::after {
    position: absolute;
    right: 18px;
    content: "✓";
    font-size: 15px;
}

.bag-drawer button.is-loading {
    opacity: .55;
    cursor: progress;
}

@keyframes yan-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .purchase-button,
    .product-wishlist-button,
    .newsletter button,
    .cookie-notice button,
    .bag-drawer button,
    .checkout-submit,
    .contact-form button[type="submit"],
    .sizes button,
    .choice-wrap,
    .product-gallery-arrow,
    .product-gallery-dot,
    .carousel-dot {
        transition-duration: .01ms;
    }
}
