/**
 * Module: WooCommerceButtons - Animated State & Mask Icons
 * Scoped strictly to .is-style-woo-animated
 */

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated) {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Shopping Cart Icon via Mask */
:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated)::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 2v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 7 17h12v-2H7.42a.25.25 0 0 1-.22-.37L8.1 13h7.45a2 2 0 0 0 1.75-1.03L20.88 5H5.21l-.94-2H1Zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 2v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 7 17h12v-2H7.42a.25.25 0 0 1-.22-.37L8.1 13h7.45a2 2 0 0 0 1.75-1.03L20.88 5H5.21l-.94-2H1Zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Normalized Idle Label */
:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-idle-presentation > span,
:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated):is(.vortex-state-loading, .vortex-state-success) > span {
    display: none !important;
}

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-idle-presentation:not(.vortex-state-loading):not(.vortex-state-success)::after {
    content: attr(data-vortex-idle-label);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated):is(.vortex-state-loading, .vortex-state-success)::after {
    content: attr(data-vortex-status-label);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Loading Spinner State */
:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-state-loading {
    cursor: wait !important;
    opacity: 0.9;
    pointer-events: none !important;
}

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-state-loading::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: vortex-woo-spin 0.8s linear infinite !important;
}

/* Success Checkmark State */
:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-state-success {
    border-color: var(--md-sys-color-tertiary) !important;
    color: var(--md-sys-color-tertiary) !important;
    background-color: color-mix(in srgb, var(--md-sys-color-tertiary) 12%, transparent) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--md-sys-color-tertiary) 40%, transparent) !important;
    cursor: default !important;
    pointer-events: none !important;
}

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-state-success:is(:focus, :focus-visible) {
    outline-color: var(--md-sys-color-tertiary) !important;
}

:is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated).vortex-state-success::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 16.2-4.2-4.2-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 16.2-4.2-4.2-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: none !important;
}

@keyframes vortex-woo-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    :is(.is-style-woo-animated .wc-block-components-product-button__button, .wc-block-components-product-button__button.is-style-woo-animated) {
        transition: none !important;
    }
}