.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.is-style-outline .wp-block-button__link { border: 2px solid } .wp-block-button.wc-block-components-product-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: currentColor } .wp-block-button.wc-block-components-product-button.is-style-outline .wp-block-button__link:not(.has-background) { background-color: transparent; background-image: none } .wp-block-button.wc-block-components-product-button.has-custom-width .wp-block-button__link { box-sizing: border-box } .wp-block-button.wc-block-components-product-button.wp-block-button__width-25 .wp-block-button__link { width: 25% } .wp-block-button.wc-block-components-product-button.wp-block-button__width-50 .wp-block-button__link { width: 50% } .wp-block-button.wc-block-components-product-button.wp-block-button__width-75 .wp-block-button__link { width: 75% } .wp-block-button.wc-block-components-product-button.wp-block-button__width-100 .wp-block-button__link { width: 100% } .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; width: auto; word-break: break-word } .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; border-style: none; 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 .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 .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: .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-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%,.302),currentColor); background-repeat: no-repeat; content: " "; display: block; height: 100%; left: 0; position: absolute; right: 0; top: 0; transform: translateX(-100%) } @keyframes loading__animation { to { 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 } .theme-twentytwentyone .editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link { background-color: var(--button--color-background); border-color: var(--button--color-background); color: var(--button--color-text) }