.volume-slider-container{position:relative;width:160px;height:20px;display:flex;align-items:center}.volume-slider-fill{position:absolute;top:50%;left:10px;transform:translateY(-50%);height:8px;width:70px;border-radius:6px;background:#fffdd0;box-shadow:0 0 8px #fffdd0cc,inset 0 0 4px #fff9;pointer-events:none;z-index:1;transition:width .1s ease}.volume-slider-container:before{content:"";position:absolute;top:50%;left:10px;transform:translateY(-50%);width:140px;height:8px;border-radius:6px;border:1.5px solid rgba(255,255,255,.8);background:#00000026;pointer-events:none;z-index:0;box-shadow:0 0 10px #fff3,inset 0 0 8px #0000004d}.volume-slider{-webkit-appearance:none;width:100%;height:100%;background:transparent;border-radius:6px;outline:none;cursor:pointer;position:relative;z-index:2;margin:0}.volume-slider::-webkit-slider-runnable-track{height:8px;border-radius:6px;background:transparent;margin:0 10px}.volume-slider::-moz-range-track{height:8px;border-radius:6px;background:transparent;border:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff 40%,#f0f);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 10px #f0fc,0 0 15px #fff9;transition:all .2s ease;margin-top:-6px}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff 40%,#f0f);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 10px #f0fc,0 0 15px #fff9;transition:all .2s ease}.volume-slider:hover::-webkit-slider-thumb,.volume-slider:active::-webkit-slider-thumb{transform:scale(1.3);box-shadow:0 0 15px #00ffffe6,0 0 20px #fffc;border-color:#fff}.volume-slider:hover::-moz-range-thumb,.volume-slider:active::-moz-range-thumb{transform:scale(1.3);box-shadow:0 0 15px #00ffffe6,0 0 20px #fffc;border-color:#fff}