html{box-sizing:border-box}*,*::before,*::after{margin:0;padding:0;box-sizing:inherit}body{width:100%;height:100dvh;color:#f5f5f5;background-color:#000}a{text-decoration:none}button{cursor:pointer;border:0;outline:none;border-style:none}section.example{width:100%;height:100%;display:grid;place-items:center}section.example .audio-player-widget{padding:1rem;display:flex;gap:.75rem;flex-direction:column;border-radius:1rem;background-color:#1c1c1e;width:min(95vw,30rem)}section.example .audio-player-widget .progress-container{display:flex;gap:.5rem;flex-direction:column}section.example .audio-player-widget input[type=range]{position:relative;width:100%;outline:none;margin-block:.25rem;background-color:rgba(0,0,0,0);appearance:none;-webkit-appearance:none}section.example .audio-player-widget input[type=range]::before{width:var(--seek-before-width);height:.25rem;content:"";cursor:pointer;position:absolute;top:0;left:0;border-radius:.125rem;background-color:#8e8e93}section.example .audio-player-widget input[type=range]::-webkit-slider-runnable-track{width:100%;height:.25rem;cursor:pointer;transition:all 50ms;border-radius:.125rem;background:linear-gradient(to right, rgba(128, 128, 128, 0.6) var(--buffered-width), rgba(128, 128, 128, 0.2) var(--buffered-width))}section.example .audio-player-widget input[type=range]::-moz-range-track{width:100%;height:.25rem;cursor:pointer;transition:all 50ms;border-radius:.125rem;background:linear-gradient(to right, rgba(120, 120, 128, 0.6) var(--buffered-width), rgba(120, 120, 128, 0.2) var(--buffered-width))}section.example .audio-player-widget input[type=range]::-webkit-slider-thumb{cursor:pointer;width:.75rem;height:.75rem;margin:-0.25rem 0 0 0;-webkit-appearance:none;border-radius:50%;background-color:#fff;filter:drop-shadow(0px 0px 0.1875rem rgba(0, 0, 0, 0.35))}section.example .audio-player-widget input[type=range]::-moz-range-thumb{cursor:pointer;width:.75rem;height:.75rem;border-radius:50%;background-color:#fff;filter:drop-shadow(0px 0px 0.1875rem rgba(0, 0, 0, 0.35))}section.example .audio-player-widget input[type=range]:active::-moz-range-thumb{transform:scale(1.2);transition:all 200ms;background-color:#ff453a}section.example .audio-player-widget input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);transition:all 200ms;background-color:#ff453a}section.example .audio-player-widget .time-container{width:100%;display:flex;gap:.5rem;align-items:center;justify-content:space-between}section.example .audio-player-widget .controls-container{display:flex;gap:1rem;align-items:center;justify-content:center}section.example .audio-player-widget .controls-container .control-icon{cursor:pointer;width:1.375rem;height:1.375rem}section.example .audio-player-widget .controls-container .control-icon.pause{display:none}section.example .audio-player-widget .controls-container .control-icon.backward,section.example .audio-player-widget .controls-container .control-icon.forward{width:1.25rem;height:1.25rem}section.example .audio-player-widget .controls-container--playing .control-icon.play{display:none}section.example .audio-player-widget .controls-container--playing .control-icon.pause{display:initial}
/*# sourceMappingURL=maps/main.css.map */