.button--primary{--button-background: var(--btn-primary-bg);--button-text-color: var(--btn-primary-text);--button-outline-color: var(--btn-primary-border)}.button--secondary{--button-background: var(--btn-secondary-bg);--button-text-color: var(--btn-secondary-text);--button-outline-color: var(--btn-secondary-border)}.button--tertiary{--button-background: var(--btn-tertiary-bg);--button-text-color: var(--btn-tertiary-text);--button-outline-color: var(--btn-tertiary-border);border-color:transparent}.button--tertiary:hover{background:rgb(var(--btn-tertiary-hover-bg, var(--background-secondary)))}.button--destructive{--button-background: var(--btn-destructive-bg);--button-text-color: var(--btn-destructive-text);--button-outline-color: var(--btn-destructive-border)}.button--success{--button-background: var(--btn-success-bg);--button-text-color: var(--btn-success-text);--button-outline-color: var(--btn-success-border)}.button--warning{--button-background: var(--btn-warning-bg);--button-text-color: var(--btn-warning-text);--button-outline-color: var(--btn-warning-border)}.button--solid{--initial-gradient: linear-gradient(rgb(var(--button-background, var(--button-background-primary))), rgb(var(--button-background, var(--button-background-primary))));background-image:var(--initial-gradient),var(--hover-gradient)}.button--ghost{background:transparent;border-color:transparent;color:rgb(var(--button-text-color, var(--text-primary)))}.button--ghost:hover{background:rgb(var(--background-secondary) / .5)}.button--text{background:transparent;border:none;padding-inline:0;text-decoration:underline;text-underline-offset:.2em}.button--text:hover{text-decoration:none}.button--pill{border-radius:var(--rounded-full)}.button--square{border-radius:0}.button--elevated{box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}.button--elevated:hover{box-shadow:var(--shadow-md)}.button--glass{position:relative;background:rgb(var(--btn-glass-tint) / var(--btn-glass-tint-opacity));border:var(--btn-glass-border);box-shadow:var(--btn-glass-shadow);overflow:hidden}@supports (backdrop-filter: blur(12px)){.button--glass{backdrop-filter:blur(var(--btn-glass-blur));-webkit-backdrop-filter:blur(var(--btn-glass-blur))}}.button--glass[data-low-opacity]{font-weight:500;text-shadow:0 1px 2px rgb(0 0 0 / .3)}.button--glass:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgb(255 255 255 / .18);border-radius:inherit;pointer-events:none}.button--gradient{--gradient-angle: 135deg;--gradient-start: var(--button-background-primary);--gradient-end: var(--accent);background:linear-gradient(var(--gradient-angle),rgb(var(--gradient-start)),rgb(var(--gradient-end)));background-size:200% 100%;border:none;transition:background-position .3s ease}@media (prefers-reduced-motion: no-preference){.button--gradient:hover{background-position:100% 0}}.button--size-xs{padding:var(--btn-size-xs-padding-y) var(--btn-size-xs-padding-x);font-size:var(--btn-size-xs-font);line-height:1.5}.button--size-s,.button-sm{padding:var(--btn-size-s-padding-y) var(--btn-size-s-padding-x);font-size:var(--btn-size-s-font);line-height:1.5}.button--size-m{padding:var(--btn-size-m-padding-y) var(--btn-size-m-padding-x);font-size:var(--btn-size-m-font);line-height:1.65}.button--size-l{padding:var(--btn-size-l-padding-y) var(--btn-size-l-padding-x);font-size:var(--btn-size-l-font);line-height:1.65}.button--size-xl{padding:var(--btn-size-xl-padding-y) var(--btn-size-xl-padding-x);font-size:var(--btn-size-xl-font);line-height:1.65}.button--size-xs .icon{width:14px;height:14px}.button--size-s .icon{width:16px;height:16px}.button--size-m .icon{width:18px;height:18px}.button--size-l .icon{width:20px;height:20px}.button--size-xl .icon{width:24px;height:24px}@media (prefers-reduced-motion: no-preference){.button--anim-lift{transition:transform var(--btn-anim-lift-duration) var(--btn-anim-lift-easing),box-shadow var(--btn-anim-lift-duration) var(--btn-anim-lift-easing)}.button--anim-lift:not(:disabled):hover{transform:translateY(var(--btn-anim-lift-distance));box-shadow:var(--shadow-md)}.button--anim-lift:not(:disabled):active{transform:translateY(0)}}@media (prefers-reduced-motion: no-preference){.button--anim-press:not(:disabled):active{transform:scale(var(--btn-anim-press-scale));transition:transform var(--btn-anim-press-duration)}}@media (prefers-reduced-motion: no-preference){.button--anim-ripple{position:relative;overflow:hidden}.button--anim-ripple:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgb(255 255 255 / .3) 0%,transparent 70%);opacity:0;transform:scale(0);transition:transform .6s,opacity .3s}.button--anim-ripple:not(:disabled):active:after{transform:scale(2);opacity:1;transition:transform 0s,opacity 0s}}@media (prefers-reduced-motion: no-preference){.button--anim-shimmer{background-size:200% 100%;animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}}@media (prefers-reduced-motion: no-preference){.button--anim-glow{transition:box-shadow .3s ease}.button--anim-glow:not(:disabled):hover{box-shadow:0 0 20px rgb(var(--button-background, var(--button-background-primary)) / .6)}}.button--loading{position:relative;color:transparent;pointer-events:none}.button--loading:after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:button-loading-spin .6s linear infinite}@keyframes button-loading-spin{to{transform:rotate(360deg)}}.button:disabled,.button[disabled]{opacity:.5;cursor:not-allowed}.button--state-success{--button-background: var(--success-text);--button-text-color: 255 255 255}.button--state-error{--button-background: var(--error-text);--button-text-color: 255 255 255}.button--icon-only{aspect-ratio:1;padding:.65rem}.button--icon-leading .text-with-icon{flex-direction:row}.button--icon-trailing .text-with-icon{flex-direction:row-reverse}@media screen and (max-width: 699px){.button--size-xl.button--responsive{padding:var(--btn-size-l-padding-y) var(--btn-size-l-padding-x);font-size:var(--btn-size-l-font)}.button--size-l.button--responsive{padding:var(--btn-size-m-padding-y) var(--btn-size-m-padding-x);font-size:var(--btn-size-m-font)}}@media (hover: none){.button{min-height:44px;min-width:44px}}@media (prefers-contrast: high){.button{border-width:2px}.button--ghost,.button--text{text-decoration:underline}}.button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.button--full{width:100%}.button--block{display:block;width:100%}.button--nowrap{white-space:nowrap}.button--subdued.button--outline{border-color:rgb(var(--border-color));color:rgb(var(--button-background, var(--button-background-primary)) / .65)}
/*# sourceMappingURL=/cdn/shop/t/82/assets/button-system.css.map */