/*-------------------------------------------
* Wishlist button on product card
*------------------------------------------*/
button {
    z-index: var(--ooo-wl-product-card-z-index, auto);
    position: absolute;
    inset-block-start: var(--ooo-wl-product-card-button-block-start, auto);
    inset-inline-end: var(--ooo-wl-product-card-button-inline-end, auto);
    inset-block-end: var(--ooo-wl-product-card-button-block-end, auto);
    inset-inline-start: var(--ooo-wl-product-card-button-inline-start, auto);

    display: grid;
    align-items: center;
    justify-content: center;
    padding: var(--ooo-wl-button-card-button-padding, 0);
    background-color: var(--ooo-wl-product-card-button-background-color, transparent);
    color: var(--ooo-wl-product-card-button-icon-color, transparent);
    border-radius: var(--ooo-wl-product-card-button-border-radius);
    border: none;
    cursor: pointer;
    transition: all var(--ooo-wl-product-card-button-fade-seconds, .4s) ease;
}

button[aria-checked="true"] svg {
    fill: currentColor;
    transition: fill .5s ease;
}

button[aria-busy="true"][aria-checked="true"] svg {
    animation: pulse 0.3s cubic-bezier(.13,-0.3,.2,1.91);
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/*---- Placeholder when loading ------*/
button[loading] {
    cursor: not-allowed;
    border: none;
    border-radius: var(--ooo-wl-product-card-button-border-radius);
    background: #ebebeb;
    animation: loadingPlaceholder 4s ease infinite;
    animation-delay: -.170s;
}

button[loading] svg {
    opacity: 0;
    visibility: hidden;
}

@keyframes loadingPlaceholder {
    50% { opacity: 1 }
    75% { opacity: .5 }
    to { opacity: 1 }
}