.button{--text-color: rgb(var(--color-button-text));--background-color: rgba(var(--color-button), var(--alpha-button-background));--border-color: rgba(var(--color-button), var(--alpha-button-background));--content-transform: translateY(0);--content-opacity: 1;--content-hidden-transform: translateY(200%);--content-hiddden-opacity: 0;position:relative;display:inline-flex;justify-content:space-between;gap:var(--spacing);padding:var(--spacing);width:100%;max-width:350px;min-width:unset;min-height:unset;overflow:hidden;text-transform:uppercase;text-align:left;font-size:1.4rem;font-weight:var(--font-weight--semibold);line-height:1.2;color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);transition:background-color .5s ease-in-out,border-color .5s ease-in-out}.button:before,.button:after{display:none}.button:hover,.button:focus-visible{--background-color: rgba(var(--color-button-hover), var(--alpha-button-background));--border-color: rgba(var(--color-button-hover), var(--alpha-button-background))}.button .svg-wrapper{width:34px;height:30px}.button svg{--icon-color: var(--text-color) !important}.button svg path{transition:all .5s ease-in-out}.button:has(>.svg-wrapper){padding:13px var(--spacing)}.button:has(>.svg-wrapper) .button__content--hidden{width:calc(100% - (34px + var(--spacing)))}.button__content{position:relative;display:flex;flex-direction:column}.button__line{opacity:var(--content-opacity);transform:var(--content-transform);transition:all .5s ease-in-out .05s;pointer-events:none}.button__line--hidden{position:absolute;width:100%;opacity:var(--content-hiddden-opacity);transform:var(--content-hidden-transform);transition:all .5s ease-in-out}.button--secondary{--text-color: rgb(var(--color-link));--background-color: transparent;--border-color: rgb(var(--color-border))}.button--secondary:hover,.button--secondary:focus-visible{--text-color: rgb(var(--color-button));--background-color: transparent;--border-color: rgb(var(--color-button))}.button--dark{--text-color: rgb(255, 255, 255);--background-color: rgb(0, 0, 0);--border-color: rgb(0, 0, 0)}.button--dark:hover,.button--dark:focus-visible{--text-color: rgb(255, 255, 255);--background-color: rgb(63, 63, 63);--border-color: rgb(63, 63, 63)}.button--diap{--text-color: rgb(0, 0, 0);--background-color: rgb(255, 255, 255);--border-color: rgb(255, 255, 255)}.button--diap:hover,.button--diap:focus-visible{--text-color: rgb(0, 0, 0);--background-color: rgb(219, 219, 219);--border-color: rgb(219, 219, 219)}.button--small{min-width:unset;width:auto}.button--centered{text-align:center;justify-content:center}.button--full-width{max-width:unset}@media screen and (min-width:768px){.button{padding:calc(1.25 * var(--spacing)) var(--spacing)}.button:has(>.svg-wrapper){padding:18px var(--spacing)}.button:hover,.button:focus-visible{--content-transform: translateY(-200%);--content-hidden-transform: translateY(0);--content-opacity: 0;--content-hiddden-opacity: 1}.button--secondary:hover,.button--secondary:focus-visible{--text-color: rgb(var(--color-button));--background-color: transparent;--border-color: rgb(var(--color-button))}.button--dark:hover,.button--dark:focus-visible{--text-color: rgb(255, 255, 255);--background-color: rgb(63, 63, 63);--border-color: rgb(63, 63, 63)}.button--diap:hover,.button--diap:focus-visible{--text-color: rgb(0, 0, 0);--background-color: rgb(219, 219, 219);--border-color: rgb(219, 219, 219)}}
/*# sourceMappingURL=/cdn/shop/t/36/assets/bbd-button.css.map */