.sa-button{--padding-x: var(--sa-button-padding-x, 20px);--padding-y: var(--sa-button-padding-y, 16px);--icon-shift: var(--sa-button-icon-shift, 25px);position:relative;display:inline-flex;width:fit-content;flex-shrink:0;color:var(--sa-button-text-color, rgb(var(--color-foreground)));font-family:var(--font-body-family);font-size:var(--sa-button-font-size, 14px);font-weight:400;line-height:1.2;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button[aria-disabled=true]{pointer-events:none;opacity:.55}.sa-button__bg{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--sa-button-border-color, transparent);border-radius:var(--sa-button-radius, 10px);background-color:var(--sa-button-background, rgba(0, 0, 0, .1));transition:transform var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1)),background-color var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1)),border-color var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button__inner{position:relative;z-index:1;display:inline-flex;justify-content:space-between;align-items:center;gap:1.2rem;width:100%;padding:var(--padding-y) var(--padding-x);overflow:hidden;transition:transform .2s var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button__label{position:relative;transition:transform var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button__icon{font-size:inherit;line-height:1;transition:transform var(--sa-button-duration, .45s) var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button:has(.sa-button__icon) .sa-button__icon:first-child{position:absolute;left:var(--padding-x);transform:translate(calc(-100% - var(--padding-x)));transition:transform 0s var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button:has(.sa-button__icon) .sa-button__icon:last-child{transition:transform 75ms var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1))}.sa-button:hover,.sa-button:focus-visible{color:var(--sa-button-hover-text-color, var(--sa-button-text-color, rgb(var(--color-foreground))))}.sa-button:hover .sa-button__bg,.sa-button:focus-visible .sa-button__bg{background-color:var(--sa-button-hover-background, #e5e5e5);border-color:var(--sa-button-hover-border-color, var(--sa-button-border-color, transparent));transform:scaleY(.95)}.sa-button:active .sa-button__bg{transition:transform .2s var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1));transform:scaleY(.925)}.sa-button:has(.sa-button__icon):hover .sa-button__label,.sa-button:has(.sa-button__icon):focus-visible .sa-button__label{transform:translate(var(--icon-shift))}.sa-button:has(.sa-button__icon):hover .sa-button__icon:first-child,.sa-button:has(.sa-button__icon):focus-visible .sa-button__icon:first-child{transition:transform 75ms var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1));transform:translate(0)}.sa-button:has(.sa-button__icon):hover .sa-button__icon:last-child,.sa-button:has(.sa-button__icon):focus-visible .sa-button__icon:last-child{transition:transform 0s var(--sa-button-ease, cubic-bezier(.215, .61, .355, 1));transform:translate(calc(100% + var(--padding-x)))}.sa-button:has(.sa-button__icon):active .sa-button__inner{transform:translate(2px)}.sa-button:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.2rem}.sa-button--secondary{--sa-button-background: var(--sa-button-secondary-background, transparent);--sa-button-hover-background: var(--sa-button-secondary-hover-background, rgba(0, 0, 0, .1));--sa-button-text-color: var(--sa-button-secondary-text-color, rgb(var(--color-foreground)));--sa-button-hover-text-color: var(--sa-button-secondary-hover-text-color, var(--sa-button-secondary-text-color, rgb(var(--color-foreground))));--sa-button-border-color: var(--sa-button-secondary-border-color, rgba(var(--color-foreground), .4));--sa-button-hover-border-color: var(--sa-button-secondary-hover-border-color, var(--sa-button-secondary-border-color, rgba(var(--color-foreground), .4)))}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-sliding-arrow-button.css.map */