.cb{--cut:8px;--depth:4px;--pad:1rem;--btn:var(--ui-primary);--btn-ink:var(--ui-bg);--btn-deep:color-mix(in oklab, var(--btn) 45%, #000);--chamfer:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));--press:.14s var(--ease-out-strong);isolation:isolate;display:inline-flex;position:relative}.cb[data-block]{width:100%;display:flex}.cb[data-color=secondary]{--btn:var(--ui-secondary)}.cb[data-color=neutral]{--btn:var(--ui-text-highlighted);--btn-deep:var(--ui-border-accented)}.cb[data-size=sm]{--cut:6px;--depth:3px;--pad:.75rem}.cb[data-size=lg]{--cut:10px;--depth:5px;--pad:1.25rem}.cb[data-size=xl]{--cut:12px;--depth:6px;--pad:1.5rem}.cb-face{isolation:isolate;padding-inline:var(--pad);clip-path:var(--chamfer);font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;transition:transform var(--press),background-color .15s ease,color .15s ease;border-radius:0;outline:none;font-weight:600;position:relative;overflow:hidden}.cb[data-square] .cb-face{padding-inline:calc(var(--pad) * .5)}.cb-face:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(105deg,#0000 35%,#ffffff47 50%,#0000 65%);position:absolute;inset:0;transform:translate(-130%)}.cb[data-variant=solid] .cb-face{background:var(--btn);color:var(--btn-ink);text-shadow:none}.cb[data-variant=solid]{filter:drop-shadow(0 0 8px color-mix(in oklab,var(--btn) 20%,transparent))}.cb[data-variant=outline] .cb-face{background:color-mix(in oklab,var(--btn) 70%,transparent);color:var(--btn)}.cb[data-variant=outline] .cb-face:before{content:"";z-index:-1;clip-path:polygon(calc(-.5px + var(--cut)) 0,100% 0,100% calc(100% + .5px - var(--cut)),calc(100% + .5px - var(--cut)) 100%,0 100%,0 calc(-.5px + var(--cut)));background:color-mix(in oklab,var(--btn) 8%,var(--color-night));transition:background-color .15s;position:absolute;inset:1px}.cb[data-variant=ghost] .cb-face,.cb[data-variant=link] .cb-face{color:var(--ui-text-toned);background:0 0}.cb[data-variant=ghost]:not([data-color=neutral]) .cb-face{color:var(--btn)}.cb[data-variant=ghost] .cb-face:after,.cb[data-variant=link] .cb-face:after,.cb[data-variant=link] .cb-tick{display:none}.cb[data-variant=link] .cb-face{clip-path:none;padding-inline:0;overflow:visible}.cb[data-variant=link] .cb-face:before{content:"//";color:var(--btn);letter-spacing:0;transition:transform var(--press)}.cb-plate{z-index:-1;clip-path:var(--chamfer);background:repeating-linear-gradient(135deg,var(--btn-deep) 0 1.5px,transparent 1.5px 5px),color-mix(in oklab,var(--btn) 18%,transparent);transform:translate(var(--depth),var(--depth));transition:background-color .15s;position:absolute;inset:0}.cb[data-variant=outline] .cb-plate{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--btn) 35%,transparent) 0 1px,transparent 1px 5px)}.cb-tick{pointer-events:none;border-color:var(--btn);opacity:.6;width:6px;height:6px;transition:transform var(--press),opacity .15s ease;position:absolute}.cb-tick-tr{border-top:1px solid;border-right:1px solid;top:-4px;right:-4px}.cb-tick-bl{border-bottom:1px solid;border-left:1px solid;bottom:-4px;left:-4px}.cb:is([data-variant=solid],[data-variant=outline]) .cb-tick-bl{bottom:calc(-4px - var(--depth))}.cb:is([data-variant=solid],[data-variant=outline]) .cb-tick-tr,.cb[data-variant=ghost] .cb-tick{opacity:0}.cb[data-variant=ghost] .cb-tick-tr{transform:translate(3px,-3px)}.cb[data-variant=ghost] .cb-tick-bl{transform:translate(-3px,3px)}.cb-code{font-family:var(--font-mono);letter-spacing:.15em;color:var(--btn);opacity:.7;pointer-events:none;margin-bottom:3px;font-size:9px;line-height:1;position:absolute;bottom:100%;right:0}@media (hover:hover) and (pointer:fine){.cb:is([data-variant=solid],[data-variant=outline]) .cb-face:not(:disabled,[aria-disabled=true]):hover{transform:translate(-1px,-1px)}.cb[data-variant=outline] .cb-face:not(:disabled,[aria-disabled=true]):hover:before{background:color-mix(in oklab,var(--btn) 16%,var(--color-night))}.cb:is([data-variant=solid],[data-variant=outline]) .cb-face:not(:disabled,[aria-disabled=true]):hover:after{transition:transform .65s var(--ease-out-strong);transform:translate(130%)}.cb[data-variant=ghost] .cb-face:not(:disabled,[aria-disabled=true]):hover{background:color-mix(in oklab,var(--btn) 10%,transparent);color:var(--ui-text-highlighted)}.cb[data-variant=ghost]:has(.cb-face:not(:disabled,[aria-disabled=true]):hover) .cb-tick{opacity:1;transform:none}.cb[data-variant=link] .cb-face:hover{color:var(--ui-text-highlighted)}.cb[data-variant=link] .cb-face:hover:before{transform:translate(-3px)}.cb:has(.cb-face:not(:disabled,[aria-disabled=true]):hover) .cb-tick-tr{opacity:1}}.cb:is([data-variant=solid],[data-variant=outline]) .cb-face:not(:disabled,[aria-disabled=true]):active{transform:translate(calc(-1px + var(--depth)),calc(-1px + var(--depth)));transition-duration:80ms}.cb:is([data-variant=ghost],[data-variant=link]) .cb-face:not(:disabled,[aria-disabled=true]):active{transform:scale(.97)}.cb:has(.cb-face:focus-visible){--btn-deep:var(--ui-secondary)}.cb:has(.cb-face:focus-visible) .cb-tick{border-color:var(--ui-secondary);opacity:1;transform:none}.cb:is([data-variant=ghost],[data-variant=link]) .cb-face:focus-visible{background:color-mix(in oklab,var(--ui-secondary) 12%,transparent);color:var(--ui-text-highlighted)}.cb:not([data-loading]):has(.cb-face:is(:disabled,[aria-disabled=true])){--btn:var(--ui-text-dimmed);--btn-deep:var(--ui-border-accented)}.cb:not([data-loading]):has(.cb-face:is(:disabled,[aria-disabled=true])) .cb-face{opacity:.6}.cb:has(.cb-face:is(:disabled,[aria-disabled=true])) .cb-tick{opacity:0}@media (prefers-reduced-motion:reduce){.cb-face,.cb-face:after,.cb-tick,.cb[data-variant=link] .cb-face:before{transition-property:background-color,color,opacity;transform:none!important}}