@use "../../styles/variables" as *;

.wcgs-range-control {

	&__track {
		position: relative;
		height: 24px;
		cursor: pointer;
		touch-action: none;
		border-radius: 4px;

		&:focus {
			outline: none;
		}

		&:focus-visible {
			box-shadow: $wcgs-focus-ring;
		}
	}

	&__rail,
	&__fill {
		position: absolute;
		left: 0;
		top: 10px;
		height: 4px;
		border-radius: 2px;
		pointer-events: none;
	}

	&__rail {
		right: 0;
		background: $wcgs-divider;
	}

	&__fill {
		background: $wcgs-accent;
	}

	&__thumb {
		position: absolute;
		top: 4px;
		width: 16px;
		height: 16px;
		margin-left: -8px;
		box-sizing: border-box;
		border-radius: 50%;
		background: #fff;
		border: 2px solid $wcgs-accent;
		box-shadow: 0 1px 3px rgba(16, 17, 20, 0.2);
		pointer-events: none;
	}

	&__number {
		flex: 0 0 96px;
		width: 96px;
	}
}