/* Shared clear-glass button: the label rolls and the arrow trades places. */
.btn{overflow:hidden}
.btn-label,.btn-icon{position:relative;z-index:1}
.btn-label{display:block;block-size:var(--button-label-line);overflow:clip}
.btn-label-roll{display:block;transition:transform var(--motion-ui) var(--ease)}
.btn-label-roll>span{display:block;line-height:var(--button-leading);white-space:nowrap}
.btn:is(:hover,:focus-visible) .btn-label-roll{transform:translateY(var(--button-roll))}
.btn-icon{position:relative;display:block;flex-shrink:var(--zero);inline-size:var(--button-arrow-size);block-size:var(--button-arrow-size);overflow:clip}
.btn-icon svg{position:absolute;inset:var(--zero);transition:transform var(--motion-ui) var(--ease)}
.btn-arrow-out{transform:translateX(var(--zero))}.btn-arrow-in{transform:translateX(var(--button-arrow-in))}
.btn:is(:hover,:focus-visible) .btn-arrow-out{transform:translateX(var(--button-arrow-out))}.btn:is(:hover,:focus-visible) .btn-arrow-in{transform:translateX(var(--zero))}
.btn:dir(rtl) .btn-arrow-out{transform:scaleX(-1) translateX(var(--zero))}.btn:dir(rtl) .btn-arrow-in{transform:scaleX(-1) translateX(var(--button-arrow-in))}
.btn:dir(rtl):is(:hover,:focus-visible) .btn-arrow-out{transform:scaleX(-1) translateX(var(--button-arrow-out))}.btn:dir(rtl):is(:hover,:focus-visible) .btn-arrow-in{transform:scaleX(-1) translateX(var(--zero))}
.btn-wash{position:absolute;inset:var(--zero);z-index:var(--zero);background:var(--button-hover-ground);opacity:var(--zero);transition:opacity var(--motion-ui) var(--ease)}
.btn:is(:hover,:focus-visible) .btn-wash{opacity:1}
.btn-shine{display:none}
@media(prefers-reduced-motion:reduce){.btn-label-roll,.btn-icon svg,.btn-wash{transition:none}.btn:is(:hover,:focus-visible) .btn-label-roll{transform:none}.btn:is(:hover,:focus-visible) .btn-arrow-out{transform:none}.btn:dir(rtl):is(:hover,:focus-visible) .btn-arrow-out{transform:scaleX(-1)}.btn:is(:hover,:focus-visible) .btn-arrow-in{visibility:hidden}}