.multi-range-slider-wrapper {
    $complete-icon-holder-dimension: 12px;
    $legend-font-size: 10px;
    $legend-icon-dimension: 9px;

    .multi-range-slider {
        width: 100%;
        display: flex;
        background: #EFEFEF;
        gap: 0px;
        padding-left: 4px;
        padding-right: 4px;
        height: 12px;
        border-radius: 20px;

        .range-div {
            position: relative;
            margin-top: 4px;
            margin-bottom: 4px;

            &:first-child {
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
            }

            &:last-child {
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            }

            .complete-icon-holder {
                right: 0;
                bottom: -0.25rem;
                position: absolute;
                border-radius: 10px;
                z-index: 3;
                width: $complete-icon-holder-dimension;
                height: $complete-icon-holder-dimension;

                .complete-icon {
                    color: white;
                    padding: 2px;
                }
            }
        }
    }

    .multi-range-slider-legends {
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        gap: 10px;

        .legend-icons-wrapper {
            display: flex;
            gap: 3px;

            .legend-icon-holder {
                border-radius: 10px;
                width: $legend-icon-dimension;
                height: $legend-icon-dimension;
            }

            .legend-name {
                font-weight: bold;
                font-size: $legend-font-size;
            }
        }
    }
}