opal-components/src/components/opal-slider/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalSlider {
	position: relative;
	top: -1px;
	display: inline-block;
	vertical-align: middle;
	user-select: none;

	&::before {
		position: absolute;
		top: 3px;
		right: 3px;
		left: 3px;
		z-index: 0;
		height: 14px;
		border-radius: 7px;
		background: hsl(0,0%,84%);
		content: '';
	}

	@el first-input-wrapper3 {
		position: absolute;
		top: 0;
		right: 10px;
		left: 10px;
		z-index: 2;
	}
		@el first-input-wrapper2 {
			position: relative;
		}
			@el first-input-wrapper {
				position: absolute;
				top: 0;
				right: 0;
				left: -10px;
				overflow: hidden;
			}
				@el first-input,
					second-input
				{
					display: block;
					margin: 0;
					padding: 0;
					width: 200px;
					height: 20px;
					background: transparent;
					-webkit-appearance: none;
				}

				@el first-input {
					&::-moz-focus-outer {
						border: none;
					}

					&::-moz-range-track {
						border: none;
						background: none;
					}

					&::-ms-track {
						border-width: 6px 0;
						border-color: transparent;
						background: transparent;
						color: transparent;
					}

					&::-ms-fill-lower {
						background: transparent;
					}

					&::-webkit-slider-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,18%,40%);
						cursor: pointer;
						transition: background .1s linear;
						-webkit-appearance: none;
					}
					&::-moz-range-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,18%,40%);
						cursor: pointer;
						transition: background .1s linear;
					}
					&::-ms-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,18%,40%);
						cursor: pointer;
						transition: background .1s linear;
					}
				}

				@el second-input {
					position: relative;
					z-index: 1;

					&::-moz-focus-outer {
						border: none;
					}

					&::-moz-range-track {
						border: none;
						background: none;
					}

					&::-ms-track {
						border-width: 6px 0;
						border-color: transparent;
						background: transparent;
						color: transparent;
					}

					&::-ms-fill-lower {
						background: transparent;
					}

					&::-webkit-slider-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,94%,54%);
						cursor: pointer;
						transition: background .1s linear;
						-webkit-appearance: none;
					}
					&::-moz-range-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,94%,54%);
						cursor: pointer;
						transition: background .1s linear;
					}
					&::-ms-thumb {
						position: relative;
						width: 20px;
						height: 20px;
						border: 0;
						border-radius: 50%;
						background: hsl(208,94%,54%);
						cursor: pointer;
						transition: background .1s linear;
					}
				}

	@el input {
		position: relative;
		z-index: 1;
		display: block;
		margin: 0;
		padding: 0;
		width: 200px;
		height: 20px;
		background: transparent;
		-webkit-appearance: none;

		&::-moz-focus-outer {
			border: none;
		}

		&::-moz-range-track {
			border: none;
			background: none;
		}

		&::-ms-track {
			border-width: 6px 0;
			border-color: transparent;
			background: transparent;
			color: transparent;
		}

		&::-ms-fill-lower {
			background: transparent;
		}

		&::-webkit-slider-thumb {
			position: relative;
			width: 20px;
			height: 20px;
			border: 0;
			border-radius: 50%;
			background: hsl(208,18%,40%);
			cursor: pointer;
			transition: background .1s linear;
			-webkit-appearance: none;
		}

		&::-moz-range-thumb {
			position: relative;
			width: 20px;
			height: 20px;
			border: 0;
			border-radius: 50%;
			background: hsl(208,18%,40%);
			cursor: pointer;
			transition: background .1s linear;
		}

		&::-ms-thumb {
			position: relative;
			width: 20px;
			height: 20px;
			border: 0;
			border-radius: 50%;
			background: hsl(208,18%,40%);
			cursor: pointer;
			transition: background .1s linear;
		}
	}

	/* States */

	& .OpalSlider__first-input:hover::-webkit-slider-thumb {
		background: hsl(208,24%,46%);
	}
	& .OpalSlider__first-input:hover::-moz-range-thumb {
		background: hsl(208,24%,46%);
	}
	& .OpalSlider__first-input:hover::-ms-thumb {
		background: hsl(208,24%,46%);
	}

	& .OpalSlider__second-input:hover::-webkit-slider-thumb {
		background: hsl(208,100%,60%);
	}
	& .OpalSlider__second-input:hover::-moz-range-thumb {
		background: hsl(208,100%,60%);
	}
	& .OpalSlider__second-input:hover::-ms-thumb {
		background: hsl(208,100%,60%);
	}

	& .OpalSlider__input:hover::-webkit-slider-thumb {
		background: hsl(208,24%,46%);
	}
	& .OpalSlider__input:hover::-moz-range-thumb {
		background: hsl(208,24%,46%);
	}
	& .OpalSlider__input:hover::-ms-thumb {
		background: hsl(208,24%,46%);
	}

	& .OpalSlider__first-input:focus,
	& .OpalSlider__second-input:focus,
	& .OpalSlider__input:focus {
		outline: none;
	}
		body:not(._no-focus-highlight) & .OpalSlider__first-input:focus::-webkit-slider-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__second-input:focus::-webkit-slider-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,94%,54%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__input:focus::-webkit-slider-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}

		body:not(._no-focus-highlight) & .OpalSlider__first-input:focus::-moz-range-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__second-input:focus::-moz-range-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,94%,54%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__input:focus::-moz-range-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}

		body:not(._no-focus-highlight) & .OpalSlider__first-input:focus::-ms-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__second-input:focus::-ms-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,94%,54%), inset 0 0 0 3px rgba(255,255,255,.8);
		}
		body:not(._no-focus-highlight) & .OpalSlider__input:focus::-ms-thumb {
			box-shadow: inset 0 0 0 2px hsl(208,18%,40%), inset 0 0 0 3px rgba(255,255,255,.8);
		}

	body:not(._no-focus-highlight) & .OpalSlider__first-input:hover:focus::-webkit-slider-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__second-input:hover:focus::-webkit-slider-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,100%,60%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__input:hover:focus::-webkit-slider-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}

	body:not(._no-focus-highlight) & .OpalSlider__first-input:hover:focus::-moz-range-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__second-input:hover:focus::-moz-range-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,100%,60%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__input:hover:focus::-moz-range-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}

	body:not(._no-focus-highlight) & .OpalSlider__first-input:hover:focus::-ms-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__second-input:hover:focus::-ms-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,100%,60%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
	body:not(._no-focus-highlight) & .OpalSlider__input:hover:focus::-ms-thumb {
		box-shadow: inset 0 0 0 2px hsl(208,24%,46%), inset 0 0 0 3px rgba(255,255,255,.8);
	}
}