.custom-dot {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: pink;
    transition: all .3s;
}

.custom-dot:hover {
    transform: rotateZ(45deg);
}

.custom-dot.focus {
    border-radius: 50%;
}

.theme-material .vue-slider-dot-tooltip {
    transform: translate(-50%, -100%);
    background: transparent;
}

.custom-step {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ccc;
    background-color: #fff;
}

.custom-step.active {
    box-shadow: 0 0 0 3px var(--primary-color);
    background-color: var(--primary-color);
}

.custom-label.active {
    color: var(--primary-color);
}

.vue-slider-process {
    background-color: var(--primary-color);
}

.vue-slider-dot-tooltip-inner {
    background-color: var(--primary08);
    border-color: var(--primary08);
}

#secondary-colored-slider .vue-slider-dot-tooltip-inner {
    background-color: $secondary;
    border-color: $secondary;
}

#warning-colored-slider .vue-slider-dot-tooltip-inner {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

#info-colored-slider .vue-slider-dot-tooltip-inner {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

#success-colored-slider .vue-slider-dot-tooltip-inner {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

#danger-colored-slider .vue-slider-dot-tooltip-inner {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}