$handle-size: 14px;

.ct-slider {
	position: relative;
	user-select: none;
	height: 18px;
	cursor: pointer;
	border-radius: 2px;
	margin-inline-end: $handle-size;

	&:before {
		position: absolute;
		content: '';
		top: calc(50% - 1px);
		inset-inline-start: 0;
		width: calc(100% + #{$handle-size});
		height: 2px;
		border-radius: inherit;
		background: var(--backgroundColor, #ced1d4);
	}

	span {
		position: absolute;
		inset-block: 0;
		inset-inline-start: var(--position);
		margin: auto 0;
		width: $handle-size;
		height: $handle-size;
		border-radius: 100%;
		background: var(--ui-accent-color);
		transition: box-shadow 0.1s ease, background 0.1s ease;
		outline: none;

		&:hover,
		&:focus,
		&:active {
			box-shadow: 0px 0px 0px 2px var(--ui-accent-color),
						0px 8px 15px 0px rgba(0, 0, 0, 0.25);
		}

		&:active {
			background: #fff;
		}
	}

	div {
		position: absolute;
		top: calc(50% - 1px);
		inset-inline-start: 0;
		height: 2px;
		padding-inline-end: #{calc($handle-size / 2)};
		background: var(--ui-accent-color);
		border-radius: inherit;
	}
}

.ct-option-slider {
	display: grid;
	grid-template-columns: 1fr 75px;
	align-items: center;
	grid-column-gap: 12px;

	// sides
	[class*='placement'] {
		flex: 0 0 15px;
		display: flex;
		margin-inline-end: 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);
	}
}


// slider steps
[data-steps] {
	div {
		display: none;
	}

	section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		inset-inline-start: 0;
		bottom: -7px;
		height: 5px;
		opacity: 0.5;
		pointer-events: none;
		width: calc(100% + #{$handle-size});

		i {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 5px;
			height: 5px;
			font-style: normal;

			&:before {
				position: absolute;
				content: '';
				width: inherit;
				height: 1px;
				background: currentColor;
			}

			&.zero:before {
				transform: rotate(90deg);
			}

			&.plus:after {
				position: absolute;
				content: '';
				width: 1px;
				height: inherit;
				background: currentColor;
			}
		}

		// positive
		&.positive {
			.minus {
				display: none;
			}

			.zero:before {
				inset-inline-end: -2px;
			}
		}
	}
}