.ct-slider {
	position: relative;
	user-select: none;
	width: 100%;
	height: 18px;
	cursor: pointer;
	border-radius: 2px;

	&:before {
		position: absolute;
		content: '';
		top: calc(50% - 1px);
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: inherit;
		background: rgba(195, 199, 202, 1);
	}

	span {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 12px;
		height: 12px;
		border-radius: 100%;
		background: $accent_color;
		transition: box-shadow 0.2s ease;

		&:hover,
		&:active {
			box-shadow: 0px 0px 0px 2px $accent_color;
		}
	}

	div {
		position: absolute;
		top: calc(50% - 1px);
		left: 0;
		height: 2px;
		background: $accent_color;
		border-radius: inherit;
	}
}

.ct-option-slider {
	display: flex;
	align-items: center;

	.ct-slider {
		flex: 1 1 auto;
	}

	.ct-slider-input {
		// flex: 0 0 40px;
		margin-left: 7%;

		input {
			width: 45px;
		}
	}

	// sides
	[class*="placement"] {
		flex: 0 0 15px;
		display: flex;
		margin-right: 5%;

		.shape {
			opacity: 0.15;
			fill: #000000;
		}

		.shape-active {
			fill: #0073AA;
		}
	}

	.placement-right svg {
		transform: rotate(90deg);
	}

	.placement-bottom svg {
		transform: rotate(180deg);
	}

	.placement-left svg {
		transform: rotate(270deg);
	}
}


.ct-slider-input {
	position: relative;

	input {
		position: relative;
		z-index: 2;
		width: 100%;
		margin: 0;
		text-align: center;
	}
}