.sc-pagination-dots{--dot-size:.5rem;--dot-active-width:1.25rem;--dot-spacing:.5rem;--dot-bg:#c6c6c6;--dot-active-bg:#000;--dot-progress-bg:#181818;--container-bg:#e7e7e7;--container-padding-x:1rem;--container-padding-y:.5rem;--play-btn-size:2rem;--play-btn-color:#e5e5e5;--play-btn-hover-color:#d6d6d6;align-items:stretch;display:flex;gap:1rem}@media (min-width:640px){.sc-pagination-dots{--dot-spacing:.625rem;--container-padding-x:1.5rem;--play-btn-size:2.5rem}}.sc-pagination-dots__container{align-items:center;background-color:var(--container-bg);border-radius:624.9375rem;display:flex;gap:var(--dot-spacing);padding:var(--container-padding-y) var(--container-padding-x);width:auto}.sc-pagination-dots__dot{background-color:var(--dot-bg);border-radius:624.9375rem;cursor:pointer;display:inline-block;height:var(--dot-size);overflow:hidden;position:relative;transition:width .3s ease;width:var(--dot-size)}.sc-pagination-dots__dot.is-active{background-color:var(--dot-active-bg)}.sc-pagination-dots__dot.is-playing{width:var(--dot-active-width)}.sc-pagination-dots__progress{background-color:var(--dot-progress-bg);top:0;right:0;bottom:0;left:0;position:absolute;transform-origin:left}.sc-pagination-dots__play-btn{color:var(--play-btn-color);cursor:pointer;font-size:var(--play-btn-size);transition:color .2s ease}.sc-pagination-dots__play-btn:hover{color:var(--play-btn-hover-color)}