.btn{position:relative;display:inline-flex;align-items:center;gap:0;overflow:hidden;
  min-height:56px;padding:5px 5px 5px 22px;
  border-radius:var(--rr-s);border:1px solid var(--ink);
  font-family:var(--f-d);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);isolation:isolate;
  transition:background .4s,color .4s,border-color .4s,padding-right .5s var(--ease-exp),transform .35s var(--ease-exp)}
.btn:active{transform:scale(.988)}


.btn:not(:has(> .btn__ar)){padding:0 22px;gap:14px}


.btn:has(> .btn__ar)::after{content:'';position:absolute;z-index:0;right:5px;top:5px;bottom:5px;
  width:46px;border-radius:var(--rr-k);background:rgba(244,245,246,.13);
  transition:background .4s,width .5s var(--ease-exp)}


.btn__ar{position:relative;z-index:1;width:16px;height:16px;flex:0 0 auto;overflow:hidden;
  
  margin-left:29px;margin-right:15px;
  transition:margin-right .5s var(--ease-exp),color .4s}
.btn:hover .btn__ar,.btn:focus-visible .btn__ar{margin-right:9px;color:var(--acc-ink)}
.btn:active .btn__ar{margin-right:15px;color:var(--acc-ink)}
.btn__ar svg{position:absolute;inset:0;transition:transform .4s var(--ease-exp)}
.btn:hover .btn__ar svg:first-child{transform:translate(120%,-120%)}
.btn__ar svg:last-child{transform:translate(-120%,120%)}
.btn:hover .btn__ar svg:last-child{transform:translate(0,0)}


.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:has(> .btn__ar)::after{background:rgba(13,16,19,.07)}
.btn--light{background:var(--paper);color:var(--dark);border-color:var(--paper)}
.btn--light:has(> .btn__ar)::after{background:rgba(13,16,19,.09)}
.on-dark .btn{background:var(--paper);color:var(--dark);border-color:var(--paper)}
.on-dark .btn:has(> .btn__ar)::after{background:rgba(13,16,19,.09)}
.on-dark .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(242,243,241,.3)}
.on-dark .btn--ghost:has(> .btn__ar)::after{background:rgba(244,245,246,.14)}


.btn--sm{min-height:44px;font-size:11px;letter-spacing:.14em;padding:4px 4px 4px 17px}
.btn--sm:not(:has(> .btn__ar)){padding:0 16px}
.btn--sm:has(> .btn__ar)::after{right:4px;top:4px;bottom:4px;width:36px;border-radius:10px}
.btn--sm:has(> .btn__ar):hover::after,
.btn--sm:has(> .btn__ar):focus-visible::after{width:44px}
.btn--sm:has(> .btn__ar):active::after{width:36px}


.btn--sm .btn__ar{margin-left:22px;margin-right:10px}
.btn--sm:hover .btn__ar,.btn--sm:focus-visible .btn__ar{margin-right:6px}
.btn--sm:active .btn__ar{margin-right:10px}


.btn.btn:has(> .btn__ar):hover,
.btn.btn:has(> .btn__ar):focus-visible{padding-right:17px}
.btn.btn:has(> .btn__ar):hover::after,
.btn.btn:has(> .btn__ar):focus-visible::after{background:var(--acc);width:58px}
.btn.btn:has(> .btn__ar):active{padding-right:5px}
.btn.btn:has(> .btn__ar):active::after{width:46px;background:var(--acc)}
.btn.btn--sm:has(> .btn__ar):hover,
.btn.btn--sm:has(> .btn__ar):focus-visible{padding-right:12px}
.btn.btn--sm:has(> .btn__ar):hover::after,
.btn.btn--sm:has(> .btn__ar):focus-visible::after{width:44px}
.btn.btn--sm:has(> .btn__ar):active{padding-right:4px}
.btn.btn--sm:has(> .btn__ar):active::after{width:36px}
@media (max-width:900px){
  .btn{font-size:12px;letter-spacing:.13em}
  .btn--sm{font-size:12px}
}