.btn-caps-stripe{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:0;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1;position:relative;transition:opacity .15s}.btn-caps-stripe:hover{opacity:.8}.btn-caps-stripe:disabled{opacity:.4;cursor:not-allowed}.btn-caps-stripe-primary{background-color:transparent;color:var(--foreground);background-image:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--foreground) 20%,transparent) 0px,color-mix(in srgb,var(--foreground) 20%,transparent) 1px,transparent 1px,transparent 5px);isolation:isolate;transition:color .2s ease .15s}.btn-caps-stripe-primary:hover{color:var(--background);opacity:1}.btn-caps-stripe-primary:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--foreground);clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);transition:clip-path .4s cubic-bezier(.25,0,0,1);z-index:-1;pointer-events:none}.btn-caps-stripe-primary:hover:after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}.btn-caps-stripe-primary:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;background-image:linear-gradient(to right,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to right,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to bottom,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to bottom,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px));background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat;pointer-events:none;z-index:2;transition:inset .25s cubic-bezier(.25,0,0,1),opacity .3s ease}.btn-caps-stripe-primary:hover:before{top:-3px;right:-3px;bottom:-3px;left:-3px}.btn-caps-stripe-primary:active:before{top:3px;right:3px;bottom:3px;left:3px;transition-duration:.12s}.btn-caps-stripe-secondary{background:transparent;color:var(--foreground)}.btn-caps-stripe-secondary:hover{color:var(--foreground);opacity:.8}.btn-caps-stripe-framed{background:transparent;color:var(--foreground)}.btn-caps-stripe-framed:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;background-image:linear-gradient(to right,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to right,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to bottom,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px)),linear-gradient(to bottom,var(--foreground) 8px,transparent 8px,transparent calc(100% - 8px),var(--foreground) calc(100% - 8px));background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat;pointer-events:none;z-index:2;transition:inset .25s cubic-bezier(.25,0,0,1)}.btn-caps-stripe-framed:hover:before{top:-3px;right:-3px;bottom:-3px;left:-3px}.btn-caps-stripe-framed:active:before{top:3px;right:3px;bottom:3px;left:3px;transition-duration:.12s}.btn-caps-stripe-framed:hover{color:var(--foreground);opacity:.8}
