.volume {
    position: relative;
    z-index: 10;

    .volume-progress {
        position: absolute;
        bottom: -4px;
        left: 50%;
        display: none;
        width: 26px;
        height: 0;
        color: var(--c-text-main);
        background-color: white;
        border-radius: 22px;
        box-shadow: var(--box-shadow);
        transform: translateX(-50%);

        .text {
            font-size: 10px;
            text-align: center;
        }

        .rc-slider-rail {
            border-radius: 10px;
        }
    }

    &:hover,
    &.active {
        color: var(--color-main);

        .volume-progress {
            display: block;
            height: 140px;

            .progress-bar {
                // overflow: hidden;
                border-radius: 10px;
            }

            .rc-slider-handle {
                z-index: 2;
                margin-left: -3px;
            }

            .click-area {
                z-index: 11;
                border-radius: 4px;
            }
        }
    }

    .v-icon {
        position: relative;
        cursor: pointer;

        .muted {
            display: none;
        }
    }

    &.mute {
        .v-icon {
            .normal {
                display: none;
            }

            .muted {
                display: block;
            }
        }
    }

    .progress-bar{
        position: relative;
        margin: 0;
        padding: 0;
        // .rc-slider-handle{
        //   display: none;
        // }
        .rc-slider-rail{
          height: inherit;
          background-color: var(--bg-color);
        }
        .rc-slider-track{
          z-index: 2;
          height: inherit;
          background-color: var(--load-color);
        }
        &.rc-slider:hover .rc-slider-track{
          background-color: var(--load-color) ;
        }
        &.rc-slider-vertical {
          .rc-slider-rail{
            left: 0;
            width: 100%;
            height: 100%;
          }
          .rc-slider-track{
            left: 0;
            width: 100%;
          }
        }
        &.disable-hover:hover{
          cursor: inherit;
          .rc-slider-rail{
            background-color: var(--bg-color);
          }
        }
    }
}