.hkplayer-volume {
    outline: none;
    order: 5;
    width: 40px;
    display: inline-block;
    position: relative;
    margin-top: -100px;
    z-index: 38;
    .hkplayer-icon {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        svg {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
.hkplayer-slider {
    display: none;
    position: absolute;
    width: 40px;
    height: 108px;
    background: $sliderBgColor;
    bottom: $controlsIconHeight;
    outline: none;
    left: 0;
    border-radius: 4px;
    @at-root .hkplayer.hkplayer-volume-active & {
        display: block;
    }
    &:after {
        content: " ";
        display: block;
        height: 15px;
        width: 28px;
        position: absolute;
        bottom: -15px;
        left: 0;
        z-index: 20;
    }
}

.hkplayer-bar, .hkplayer-drag {
    display: block;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: $sliderBarBgColor;
    border-radius: 100px;
    width: 4px;
    height: 78px;
    outline: none;
    cursor: pointer;
}

.hkplayer-drag {
    bottom: 0;
    background: $sliderDragBgColor;
    max-height: 78px;
    &-dot {
      z-index: 30;
      position: absolute;
      width: 20px;
      top: -3.8px;
      left: -8px;
      height: 20px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0);
      &:hover {
        background-color: rgba(255, 255, 255, .2);
      }
    }
    &:after {
        content: " ";
        display: inline-block;
        left: -4px;
        top: 0;
        width: 12px;
        height: 12px;
        box-shadow: 0 0 8px 0 #fe104c;
        background-color: #ffffff;
        position: absolute;
        border-radius: 50%;
    }
}