.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;
    // width: 100%;
    position: relative; // for dev
}

.meter_container {
    position: relative;
    width: 100%;
    height: 0.8rem;
    background: var(--dark_800_color);
    border-radius: 0.4rem;
}

.volume_meter {
    height: 100%;
    border-radius: inherit;
    transition: width 0.1s ease, background-color 0.1s ease;
}

.threshold_slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;

    &::-webkit-slider-runnable-track {
        width: 100%;
        background: transparent;
        cursor: pointer;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 0.4rem;
        height: 4rem;
        background: var(--primary_600_color);
        border-radius: 0.2rem;
        cursor: pointer;
    }

    &:hover::-webkit-slider-thumb{
        background: var(--primary_500_color);
    }

    &:focus {
        outline: none;
    }
}