.ball{height:10px;width:10px;position:absolute;transform:translateY(-50%);border-radius:50%}.dom:not(.edit):hover .ball{height:13px;width:13px;transition:all ease-in}.dom{cursor:pointer;z-index:15;.bar{height:3px;border-radius:5px;width:100%;transform:translateY(-50%);position:absolute}&.ghost{z-index:0;.bar{border-radius:4px;height:calc(50% - 8px);opacity:.7}.ball,.bar{transform:translateY(3px)}.ball{height:0;width:0;background:none;.tooltip{top:15px;left:50%;transform:translateX(-50%);.triangle{display:none}}}}}.dom>*{top:50%}.tooltip{display:none;position:absolute;z-index:20;font-size:12px;top:-25px;left:50%;transform:translateX(-50%)}.dom:not(.edit):hover .tooltip{display:block}.triangle{width:0;height:0;border-style:solid;border-right:6px solid transparent;border-left:6px solid transparent;border-top:6px solid #fff;border-bottom:0;border-radius:2px}.progress{z-index:0}.progressBar{width:100%;position:absolute;top:0;left:0;height:100%;background:#151514e5;display:flex}.indicator{height:100%;margin-left:auto;width:1px;background:red}.timeStamp{position:absolute;right:4px;bottom:4px;font-size:12px;color:#9f998e}.midline{width:100%;height:3px;background:#4f4c47;top:50%;transform:translateY(-50%);left:0;position:absolute;z-index:1}