.setting-volume {

    .volume-wrap {

        .active-track {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: -0.5px;
            left: 1px;
            width: calc(var(--value) * 100% +
            (19px - var(--value) * 21px) /* +19px to the left, -2px to the right */
            );

            height: 18px;
            background: var(--color-control);
            border-radius: 9px;

        }

        .thumb {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: -0.5px;
            left: calc(var(--value) * 100% +
            (1px - var(--value) * 20px) /* +1px to the left, -19px to the right */
            );
            width: 18px;
            height: 18px;
            background: var(--color-control);

            --shadow-opacity: min(0.4, calc(var(--value) - 0.08));

            box-shadow: 0 0 0 1px rgba(124,124,124,var(--shadow-opacity));
            border-radius: 9px;
        }

        .icon {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: 1px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: url(../img/icon-volume-off-dark.png) no-repeat 0 0;
            background-size: 16px 16px;
            border-radius: 8px;
            transition: all var(--speed) var(--easing);
        }
    }

}