@keyframes spinner__animation { 0% { animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297); transform: rotate(0deg); } to { transform: rotate(-1turn); } } @keyframes loading__animation { to { transform: translateX(-100%); } } .wp-block-button.wc-block-components-product-button { align-items: center; display: flex; flex-direction: column; gap: 12px; justify-content: center; white-space: normal; word-break: break-word; } .wp-block-button.wc-block-components-product-button .wp-block-button__link { display: inline-flex; font-size: 1em; justify-content: center; text-align: center; white-space: normal; word-break: break-word; } .wp-block-button.wc-block-components-product-button .wp-block-button__link.loading { opacity: 0.25; } .wp-block-button.wc-block-components-product-button .wp-block-button__link.loading:after { animation: spin 2s linear infinite; content: ""; display: inline-block; font-family: WooCommerce; height: auto; margin-right: 0.5em; margin-left: 0; width: auto; } .wp-block-button.wc-block-components-product-button a[hidden] { display: none; } @keyframes slideOut { 0% { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes slideIn { 0% { opacity: 0; transform: translateY(90%); } to { opacity: 1; transform: translate(0); } } .wp-block-button.wc-block-components-product-button.align-left { align-items: flex-start; } .wp-block-button.wc-block-components-product-button.align-right { align-items: flex-end; } .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button { align-items: center; display: inline-flex; justify-content: center; line-height: inherit; overflow: hidden; white-space: normal; word-break: break-word; } .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button span.wc-block-slide-out { animation: slideOut 0.1s linear 1 normal forwards; } .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button span.wc-block-slide-in { animation: slideIn 0.1s linear 1 normal; } .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder { background-color: currentColor !important; border: 0 !important; border-radius: 0.25rem; box-shadow: none; color: currentColor !important; display: block; line-height: 1; max-width: 100% !important; min-height: 3em; min-width: 8em; opacity: 0.15; outline: 0 !important; overflow: hidden !important; pointer-events: none; position: relative !important; width: 100%; z-index: 1; } .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder > * { visibility: hidden; } .wp-block-button.wc-block-components-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%, 0.302), currentColor ); background-repeat: no-repeat; content: " "; display: block; height: 100%; right: 0; position: absolute; left: 0; top: 0; transform: translateX(100%); } @media screen and (prefers-reduced-motion: reduce) { .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder { animation: none; } } .wc-block-all-products .wp-block-button.wc-block-components-product-button { margin-bottom: 12px; } .is-loading .wc-block-components-product-button > .wc-block-components-product-button__button { background-color: currentColor !important; border: 0 !important; border-radius: 0.25rem; box-shadow: none; color: currentColor !important; display: block; line-height: 1; max-width: 100% !important; min-height: 3em; min-width: 8em; opacity: 0.15; outline: 0 !important; overflow: hidden !important; pointer-events: none; position: relative !important; width: 100%; z-index: 1; } .is-loading .wc-block-components-product-button > .wc-block-components-product-button__button > * { visibility: hidden; } .is-loading .wc-block-components-product-button > .wc-block-components-product-button__button:after { animation: loading__animation 1.5s ease-in-out infinite; background-image: linear-gradient( -90deg, currentColor, hsla(0, 0%, 96%, 0.302), currentColor ); background-repeat: no-repeat; content: " "; display: block; height: 100%; right: 0; position: absolute; left: 0; top: 0; transform: translateX(100%); } @media screen and (prefers-reduced-motion: reduce) { .is-loading .wc-block-components-product-button > .wc-block-components-product-button__button { animation: none; } } .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid; } .wp-block-button.has-custom-width .wp-block-button__link { box-sizing: border-box; } .wp-block-button.wp-block-button__width-25 .wp-block-button__link { width: 25%; } .wp-block-button.wp-block-button__width-50 .wp-block-button__link { width: 50%; } .wp-block-button.wp-block-button__width-75 .wp-block-button__link { width: 75%; } .wp-block-button.wp-block-button__width-100 .wp-block-button__link { width: 100%; }