/*--------------------------------------------

    # Product button

----------------------------------------------*/
.wp-block-woocommerce-product-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal
}
.wp-block-woocommerce-product-button > * {
    flex-grow: 1;
}
.wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button {
    display: inline-flex;
    justify-content: center !important;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    word-break: normal;
    flex-grow: 0;
    border-style: solid;
}
.wp-block-woocommerce-product-button.wp-block-button__width-25 .wp-block-button__link{
    width:25%
}
.wp-block-woocommerce-product-button.wp-block-button__width-50 .wp-block-button__link{
    width:50%
}
.wp-block-woocommerce-product-button.wp-block-button__width-75 .wp-block-button__link{
    width:75%
}
.wp-block-woocommerce-product-button.wp-block-button__width-100 .wp-block-button__link{
    width:100%
}
.wp-block-woocommerce-product-button a[hidden] {
    display: none;
}
.wp-block-woocommerce-product-button.align-left {
    justify-content: left;
}
.wp-block-woocommerce-product-button.align-right {
    justify-content: right;
}
.wp-block-woocommerce-product-button .wc-block-components-product-button__button span.wc-block-slide-out {
    animation: slideOut .1s linear 1 normal forwards;
}
.wp-block-woocommerce-product-button .wc-block-components-product-button__button span.wc-block-slide-in {
    animation: slideIn .1s linear 1 normal;
}
.wp-block-woocommerce-product-button .wp-block-button__link.loading {
    color: var(--wp--preset--color--black);
    animation: addToCartLoading 2.5s linear infinite;
    background-image: linear-gradient(-45deg, var(--wp--preset--color--gray) 33%, var(--wp--preset--color--gray-ultra-light) 0, var(--wp--preset--color--gray-ultra-light) 66%, var(--wp--preset--color--gray) 0);
    background-size: 100px 100%;
}


.wp-block-woocommerce-product-button .wc-block-components-product-button__button--placeholder {
    background-color: currentColor !important;
    border: 0 !important;
    border-radius:.25rem; 
    box-shadow: none;
    color: currentColor !important;
    display: block;
    line-height: 1;
    max-width: 100% !important;
    min-height: 3em;
    min-width: 8em;
    opacity:.15; outline: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    position: relative !important;
    width: 100%;
    z-index: 1;
}
.wp-block-woocommerce-product-button .wc-block-components-product-button__button--placeholder > * {
    visibility:hidden
}
.wp-block-woocommerce-product-button .wc-block-components-product-button__button--placeholder:after{
    animation: loading__animation 1.5s ease-in-out infinite;
    background-image: linear-gradient(90deg,currentColor,hsla(0,0%,96%,.302),currentColor);
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
}


/* Added to cart label */
.wp-block-woocommerce-product-button .wp-block-button__link + span {
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50%;
}
.wp-block-woocommerce-product-button .added_to_cart {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
    padding: 0.3em 0.7em;
    text-decoration: none;
    line-height: 1.1;
    font-size: var(--wp--preset--font-size--x-small);
    text-align: left;
    background-color: var(--wp--preset--color--white);
    border: 1px solid;
    border-radius: 1em;
}
.wp-block-woocommerce-product-button .added_to_cart::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 48%;
    border: 5px solid transparent; 
    border-top-color: currentColor;
}
.wp-block-woocommerce-product-button.align-left .wp-block-button__link + span {
    left: 0;
    translate: 0;
}
.wp-block-woocommerce-product-button.align-left .added_to_cart::after {
    left: 10%;
}
.wp-block-woocommerce-product-button.align-right .wp-block-button__link + span {
    left: auto;
    right: 0;
    translate: 0;
}
.wp-block-woocommerce-product-button.align-right .added_to_cart::after {
    left: auto;
    right: 10%;
}

@media screen and (prefers-reduced-motion:reduce) {
    .wp-block-woocommerce-product-button .wc-block-components-product-button__button--placeholder {
        animation: none
    }
}

@keyframes addToCartLoading {
    0% {
        background-position: 200px 0;
    }
}
@keyframes wc-skeleton-shimmer {
    to {
        transform: translateX(100%)
    }
}
@keyframes loading__animation {
    to {
        transform: translateX(100%)
    }
}
@keyframes slideOut {
    0% { 
        transform: translateY(0)
    }
    to {
        transform:translateY(-100%)
    }
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(90%)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}
/*---------------- End product button ----------------*/