.play-button{aspect-ratio:1;cursor:pointer;border:2px solid #444;border-radius:50%;justify-content:center;align-items:center;height:auto;padding:5px;display:flex}.play-button svg{background:0 0;width:100%;transition:transform .2s ease-in-out,filter .2s ease-in-out}.play-button:hover svg{filter:drop-shadow(0 0 5px #7c7c7c);transform:scale(1.1)}
.player-open .progressbar.visible{height:5px}.player-open .progressbar.visible .progressbar__current-time,.player-open .progressbar.visible .progressbar__total-time{visibility:visible}.player-open .progressbar.visible:hover{height:10px}.player-open .progressbar.visible:hover .time-selector{visibility:visible;opacity:1}.progressbar{cursor:pointer;background:#fff;width:100%;height:0;transition:height .15s ease-in-out;position:absolute;bottom:-5px;left:0}.progressbar__current-time,.progressbar__total-time{visibility:hidden;font-size:.8rem;position:absolute;bottom:115%}.progressbar__time-selector{opacity:0;visibility:hidden;color:#fff;background-color:#000000b3;padding:5px 8px;font-size:.8rem;transition:opacity .15s ease-in-out;position:absolute;bottom:150%;transform:translate(-50%)}.progressbar:hover{height:0}.progressbar:hover .progressbar__time-selector{visibility:visible;opacity:1}.progressbar__progress{background-color:var(--main-color);height:100%;position:absolute;bottom:0;left:0}.progressbar__progress__cursor{background-color:#00f;width:5px;height:100%;position:absolute;right:-5px;transform:translate(-50%)}.progressbar__total-time{right:5px}.progressbar__current-time{left:5px}
.volume__container{z-index:150;cursor:pointer;flex-direction:column;display:flex;position:relative}.volume__container button{cursor:pointer;background:0 0;border:none}.volume__container:hover .volume__wrapper{visibility:visible;opacity:1}.volume__wrapper{visibility:hidden;opacity:0;transform-origin:100%;padding:15px 15px 15px 8px;position:absolute;top:0;right:50%;transform:translateY(10px)rotate(-90deg)}.volume__slider{appearance:none;transform-origin:100%;cursor:pointer;background:#fff;height:8px;bottom:-20px;right:45%;box-shadow:1px 0 12px 1px #00000080}.volume__slider::-webkit-slider-thumb{appearance:none;background:#000;border-radius:50%;width:1.4rem;height:1.4rem}.volume__slider::-moz-range-thumb{cursor:pointer;background:#04aa6d;width:25px;height:25px}