@layer components{.progress-label{--gap:.5rem;gap:var(--gap);pointer-events:none;flex-direction:column;width:100%;display:flex}.progress-label[data-side=left]{flex-direction:row;align-items:center}progress{--percent:0;width:100%;position:relative}.progress-label progress:after{content:"";background:linear-gradient(to right, var(--add-total-color) calc(var(--percent) * 100%), var(--fg2) 0);border:1px solid var(--bgE);border-radius:999px;width:100%;height:7px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.progress-dots{--value:0%;height:20px;position:relative}.progress-dots>span{z-index:2;bottom:0;left:var(--value);position:absolute;transform:translate(-50%)}.progress-dots>span:before{--size:15px;content:"";z-index:2;bottom:calc(-1px - var(--size) / 2 - var(--gap));width:var(--size);height:var(--size);background-color:var(--add-total-color);border:1px solid var(--bgE);border-radius:100%;position:absolute;left:50%;transform:translate(-50%)translateY(50%)}}