.order-track{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;position:relative}.order-track:after,.order-track:before{content:"";border-radius:2px;height:2px;position:absolute;top:11px;left:12.5%}.order-track:before{background:var(--color-line);right:12.5%}.order-track:after{width:calc(75%*var(--reached));background:var(--color-primary);transform-origin:0;animation:1.2s cubic-bezier(.16,1,.3,1) .4s backwards order-track-fill}.order-track__step{z-index:1;text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.order-track__dot{width:24px;height:24px;color:var(--color-on-primary);background:var(--color-surface);border:2px solid var(--color-line);border-radius:50%;place-items:center;display:grid}.order-track__step--done .order-track__dot{background:var(--color-primary);border-color:var(--color-primary)}.order-track__step--now:not(:last-child) .order-track__dot{background:var(--color-surface);border-width:7px;animation:2.4s cubic-bezier(.22,1,.36,1) infinite order-track-ring}.order-track__label{color:var(--color-ink-subtle);margin-top:8px;font-size:.8125rem;font-weight:600}.order-track__step--done .order-track__label{color:var(--color-ink)}.order-track__date{font-variant-numeric:tabular-nums;color:var(--color-ink-subtle);font-size:.75rem}@media (prefers-reduced-motion:reduce){.order-track:after,.order-track__dot{animation:none!important}}@keyframes order-track-fill{0%{transform:scaleX(0)}}@keyframes order-track-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 35%,transparent)}70%,to{box-shadow:0 0 0 10px #0000}}