.material-switch > input[type='checkbox']
	display: none

.material-switch > label
	cursor: pointer
	margin-top: 0.8rem
	float: right
	height: 0px
	position: relative
	width: 40px

.material-switch > label::before
	background: rgb(0, 0, 0)
	box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5)
	border-radius: 8px
	content: ''
	height: 16px
	margin-top: -8px
	position: absolute
	opacity: 0.3
	transition: all 0.4s ease-in-out
	width: 40px

.material-switch > label::after
	background: rgb(255, 255, 255)
	border-radius: 16px
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)
	content: ''
	height: 24px
	left: -4px
	margin-top: -8px
	position: absolute
	top: -4px
	transition: all 0.3s ease-in-out
	width: 24px

.material-switch > input[type='checkbox']:checked + label::before
	background: #007bff
	opacity: 0.5

.material-switch > input[type='checkbox']:checked + label::after
	background: #007bff
	left: 20px