@keyframes dashSlide{0%{background-position:0 0,100% 0,0 100%,0 0}to{background-position:12px 0,100% 12px,-12px 100%,0 -12px}}.animated-dotted-button{appearance:none;user-select:none;white-space:nowrap;vertical-align:middle;cursor:var(--chakra-cursor-button);isolation:isolate;line-height:1.25rem;font-weight:var(--chakra-font-weights-medium);font-size:var(--chakra-font-sizes-sm);justify-content:center;align-items:center;gap:var(--chakra-spacing-2);height:var(--chakra-sizes-10);width:var(--animated-dotted-button-width,auto);min-height:var(--animated-dotted-button-min-height,var(--chakra-sizes-10));min-width:var(--animated-dotted-button-min-width,var(--chakra-sizes-10));padding-inline:var(--chakra-spacing-4);border-style:solid;border-width:2px;border-color:var(--chakra-colors-transparent);border-radius:var(--chakra-radii-md);background:var(--animated-dotted-button-palette-solid);--bg-currentcolor:var(--animated-dotted-button-palette-solid);color:var(--animated-dotted-button-palette-contrast);box-shadow:var(--chakra-shadows-md);transition:all var(--transition-durations-fast) ease;outline:0;flex-shrink:0;display:inline-flex;position:relative;overflow:visible}.animated-dotted-button--primary{--animated-dotted-button-palette-solid:var(--chakra-colors-primary-solid);--animated-dotted-button-palette-contrast:var(--chakra-colors-primary-contrast);--animated-dotted-button-palette-fg:var(--chakra-colors-primary-fg);--animated-dotted-button-palette-focus-ring:var(--chakra-colors-primary-focus-ring)}.animated-dotted-button--inherited-palette{--animated-dotted-button-palette-solid:var(--chakra-colors-color-palette-solid);--animated-dotted-button-palette-contrast:var(--chakra-colors-color-palette-contrast);--animated-dotted-button-palette-fg:var(--chakra-colors-color-palette-fg);--animated-dotted-button-palette-focus-ring:var(--chakra-colors-color-palette-focus-ring)}.animated-dotted-button:is(:focus-visible,[data-focus-visible]){outline-width:var(--focus-ring-width,2px);outline-offset:var(--focus-ring-offset,2px);outline-style:var(--focus-ring-style,solid);outline-color:var(--focus-ring-color,var(--animated-dotted-button-palette-focus-ring))}.animated-dotted-button:is(:disabled,[disabled],[data-disabled],[aria-disabled=true]){opacity:.5;cursor:not-allowed}.animated-dotted-button :where(svg){width:var(--chakra-sizes-5);height:var(--chakra-sizes-5);flex-shrink:0}.animated-dotted-button:before{content:"";border-radius:var(--chakra-radii-md);pointer-events:none;color:var(--animated-dotted-button-palette-solid);-webkit-mask-composite:xor;opacity:0;transition:opacity var(--transition-durations-fast) ease;background-image:repeating-linear-gradient(90deg,currentColor 0 6px,#0000 6px 12px),repeating-linear-gradient(currentColor 0 6px,#0000 6px 12px),repeating-linear-gradient(270deg,currentColor 0 6px,#0000 6px 12px),repeating-linear-gradient(0deg,currentColor 0 6px,#0000 6px 12px);background-position:0 0,100% 0,0 100%,0 0;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;background-size:12px 2px,2px 12px,12px 2px,2px 12px;padding:2px;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.animated-dotted-button:is(:active,[data-active]):not(:disabled,[data-disabled],[aria-disabled=true],[data-state=open]){--mix-background:color-mix(in srgb, var(--animated-dotted-button-palette-solid) 80%, transparent);background:var(--mix-background,var(--animated-dotted-button-palette-solid));--bg-currentcolor:var(--mix-background,var(--animated-dotted-button-palette-solid));color:var(--animated-dotted-button-palette-contrast);border-color:var(--chakra-colors-transparent);box-shadow:var(--chakra-shadows-sm)}@media (hover:hover){.animated-dotted-button:is(:hover,[data-hover]):not(:disabled,[data-disabled],[aria-disabled=true]){border-color:var(--chakra-colors-transparent);background:var(--chakra-colors-bg);--bg-currentcolor:var(--chakra-colors-bg);color:var(--animated-dotted-button-palette-fg);box-shadow:var(--chakra-shadows-lg)}.animated-dotted-button:is(:hover,[data-hover]):not(:disabled,[data-disabled],[aria-disabled=true]):before{opacity:1;animation:.9s linear infinite dashSlide}}@media (prefers-reduced-motion:reduce){.animated-dotted-button:is(:hover,[data-hover]):before{animation:none}}
