.volumeCTN {
    position: absolute;
    display: flex;

    flex-direction: column;

    width: 37px;

    top: 34%;
    right: -10px;
    translate: 100% -50%;
    scale: 0.86;

    gap: 7px;

    z-index: 10000;

    justify-content: center;
    align-items: center;

    overflow: visible;
    pointer-events: none;

    transition: right calc(0.6s * var(--bg-speedAnimation)), translate calc(0.6s * var(--bg-speedAnimation)),
        scale calc(0.6s * var(--bg-speedAnimation)) calc(0.1s * var(--bg-speedAnimation))
            cubic-bezier(0.39, 1.4, 0.4, 1),
        transform 0.2s 0.05s;

    &.click {
        transform: translateX(-4px);
    }
    &.open {
        transition: right calc(0.6s * var(--bg-speedAnimation)) cubic-bezier(0.39, 1.5, 0.4, 1),
            translate calc(0.6s * var(--bg-speedAnimation)) cubic-bezier(0.39, 1.5, 0.4, 1),
            scale calc(0.6s * var(--bg-speedAnimation)) calc(0.1s * var(--bg-speedAnimation))
                cubic-bezier(0.39, 1.6, 0.4, 1),
            transform 0.2s 0.05s;

        right: 10px;
        translate: 0 -50%;
        scale: 1;
        pointer-events: all;
        /*.volumeMain,
        .RingMode {
             box-shadow: 0 0 15px #00000080;
        }*/
    }
    &.small {
        .volumeMain,
        .RingMode {
            width: 20%;
            border-radius: 5px;
            translate: 18px 0;
        }
        .RingMode,
        svg {
            opacity: 0;
        }

        .volumeMain {
            transform: translateY(-10px);

            &::after {
                width: calc(100% + 40px);
            }
        }
    }

    .volumeMain {
        position: relative;
        height: 125px;
        width: 90%;

        border-radius: calc(var(--bg-borderRadiusSys) * 0.45);

        background-color: #41414179;

        backdrop-filter: blur(10px);

        align-content: end;
        justify-items: center;

        transition: all calc(0.6s * var(--bg-speedAnimation)) cubic-bezier(0.39, 1.4, 0.4, 1),
            transform calc(0.3s * var(--bg-speedAnimation));

        .ov {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            overflow: hidden;
            align-content: end;
            .sliderIN {
                background-color: #fff;
                transition: height 0.1s;
            }
        }
        &.active {
            width: 100%;
            height: 135px;
            transform: translateX(-10%);
        }

        svg {
            transition: opacity calc(0.2s * var(--bg-speedAnimation));
            position: absolute;
            z-index: 2;
            bottom: 10%;
            height: 18px;
            width: 100%;
        }

        &::after {
            content: "";
            position: absolute;
            display: flex;
            width: 100%;
            height: 100%;
            top: 0;
            transition: all calc(0.6s * var(--bg-speedAnimation)) cubic-bezier(0.39, 1.4, 0.4, 1);
        }
    }

    .volumeMain.active ~ .RingMode {
        width: 100%;
        transform: translate(-10%, 10%);
    }

    .RingMode {
        display: flex;
        transition: all calc(0.6s * var(--bg-speedAnimation)) cubic-bezier(0.39, 1.4, 0.4, 1),
            transform calc(0.3s * var(--bg-speedAnimation)), opacity calc(0.2s * var(--bg-speedAnimation));
        width: 90%;
        aspect-ratio: 1 / 1;
        background-color: rgb(255, 208, 0);
        border-radius: calc(var(--bg-borderRadiusSys) * 0.45);
        align-items: center;
        justify-content: center;

        svg {
            position: absolute;
            height: 18px;
            width: 18px;
        }
    }
}