.dot-indicator{--dot-indicator-size: .625rem;--dot-indicator-marker: 1rem;--dot-indicator-gap: var(--spacing-4);--dot-indicator-pitch: calc(var(--dot-indicator-size) + var(--dot-indicator-gap));position:relative;display:inline-flex;gap:var(--dot-indicator-gap);align-items:center;height:var(--dot-indicator-marker)}.dot-indicator__dot{position:relative;flex-shrink:0;width:var(--dot-indicator-size);height:var(--dot-indicator-marker);padding:0;cursor:pointer;background:transparent;border:0;border-radius:var(--rounded-full)}.dot-indicator__dot:before{position:absolute;top:50%;left:50%;width:var(--dot-indicator-size);height:var(--dot-indicator-size);background:var(--ds-color-primary-800);border-radius:var(--rounded-full);transform:translate(-50%,-50%);transition:transform .16s cubic-bezier(.34,1.56,.64,1);content:""}.dot-indicator__dot:after{position:absolute;inset:-.5rem;content:""}.dot-indicator__dot[aria-current=true]:before{transform:translate(-50%,-50%) scale(0)}.dot-indicator__dot:focus-visible{outline:2px solid var(--ds-color-primary-900);outline-offset:.25rem}.dot-indicator__marker{position:absolute;top:0;left:calc((var(--dot-indicator-size) - var(--dot-indicator-marker)) / 2);width:var(--dot-indicator-marker);height:var(--dot-indicator-marker);pointer-events:none;background:var(--ds-color-secondary-200);border:1px solid var(--ds-color-secondary-500);border-bottom-width:3px;border-radius:var(--rounded-full);translate:calc(var(--dot-indicator-active, 0) * var(--dot-indicator-pitch)) 0;transition:translate .28s cubic-bezier(.34,1.56,.64,1)}.dot-indicator__marker--landing{animation:dot-indicator-pop .38s cubic-bezier(.34,1.56,.64,1) .14s both}@keyframes dot-indicator-pop{0%{scale:.75}45%{scale:1.5 .8}70%{scale:.92 1.18}to{scale:1}}@media(prefers-reduced-motion:reduce){.dot-indicator__dot:before,.dot-indicator__marker{transition:none}.dot-indicator__marker--landing{animation:none}}