@property --border-angle{syntax:"<angle>";initial-value:270deg;inherits:true}.gray-border[data-v-f8dae9f3]{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background:var(--Black-600);border-radius:5rem;height:-moz-fit-content;height:fit-content;overflow:hidden;position:relative;transition:1s var(--ease-default);transition-property:--border-angle,opacity;width:-moz-fit-content;width:fit-content}@media(hover:hover){.gray-border[data-v-f8dae9f3]:hover{--border-angle:90deg}}.gray-border-inner[data-v-f8dae9f3]{align-items:center;border-radius:inherit;display:flex;gap:.25rem;height:calc(100% - 2px);justify-content:center;left:1px;position:relative;top:1px;width:calc(100% - 2px);z-index:1}.gray-border[data-v-f8dae9f3]:before{background:linear-gradient(var(--border-angle),transparent 0,var(--Border-100) 100%);border-radius:inherit;content:"";height:100%;left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;position:absolute;top:50%;transform:translateY(-50%);transition:transform var(--duration-default);width:100%;z-index:var(--z-index-1)}