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

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

@component OpalSwitch {
	position: relative;
	display: inline-block;

	@el label {
		&:hover {
			@el thumb {
				background: hsl(208,24%,46%);
			}
		}
	}
		@el input {
			display: none;
		}

		@el control {
			position: relative;
			top: -1px;
			display: inline-block;
			margin: 3px;
			width: 30px;
			height: 14px;
			border-radius: 7px;
			background: hsl(0,0%,84%);
			vertical-align: middle;
			cursor: pointer;
			user-select: none;

			&:focus {
				outline: none;

				body:not(._no-focus-highlight) & {
					@el thumb {
						&::after {
							position: absolute;
							top: 2px;
							right: 2px;
							bottom: 2px;
							left: 2px;
							border: 1px solid rgba(255,255,255,.8);
							border-radius: 50%;
							content: '';
						}
					}
				}
			}
		}
			@el thumb {
				position: absolute;
				top: -3px;
				left: -3px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: hsl(208,18%,40%);
				transition: background .1s linear, transform .1s linear;
			}

		@el content-slot {
		}

	@mod checked {
		@el label {
			&:hover {
				@el thumb {
					background: hsl(208,100%,60%);
				}
			}
		}
			@el thumb {
				background: hsl(208,94%,54%);
				transform: translateX(16px);
			}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;
	}
}