.vps-slider {
	height: 8px;
	background-color: #f1f5f9;
	border: none !important;
	border-radius: 1rem !important;
	position: relative;
	isolation: isolate;
	&-container {
		position: relative;
	}
	&-amount {
		display: none;
	}
	&__progress {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
		background-color: $primary;
	}
	&__controller {
		position: relative;
		top: -0.5em !important;
		width: 1.5rem !important;
		height: 1.5rem !important;
		border-radius: 50%;
		background-color: $white !important;
		border: 6px solid $primary !important;
		outline: none !important;
	}
	&__tooltip {
		display: inline-block;
		min-width: 50px;
		width: max-content;
		text-align: center;
		padding: 0.25rem 0.75rem;
		position: absolute;
		bottom: calc(100% + 1rem);
		left: 50%;
		transform: translateX(-50%);
		background-color: $white;
		color: $primary;
		font-size: 12px;
		font-weight: 600;
		border-radius: 1rem;
		transition: $transition-base;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 6px 6px 0 6px;
			border-color: $white transparent transparent transparent;
			transform: translateX(-50%);
		}
	}
    &-details {
        &__info {
            border: 2px dashed rgba($primary, .1);
        }
        &__config {
            min-width: 70px;
            padding: 4px;
            border: 1px solid $border-color;
            border-radius: 2px;
            text-align: center;
            font-size: 14px;
        }
    }
}