.example-switchbox {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 16px;
	padding: 2px;
	background-color: #b9c4d5;
	cursor: pointer;
}

.example-switchbox::before {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: white;
	content: "";
}

.example-switchbox-yes {
	opacity: 0;
}
.example-switchbox-no {
	opacity: 1;
}

.example-switchbox.is-pressed {
	background-color: #2dbf81;
}

.example-switchbox.is-pressed .example-switchbox-yes {
	opacity: 1;
}

.example-switchbox.is-pressed .example-switchbox-no {
	opacity: 0;
}

.example-switchbox.is-pressed::before {
	transform: translateX(16px);
}