@import "../config.styl"

$backColor = #757575

.label
	position relative
	display flex
	user-select none
	align-items center

	+ .label
		margin-top 8px

	p
		margin-left 4px

	span
		top 0
		left 0
		width 20px
		height @width
		position relative
		box-shadow inset 0 0 0 2px var(--gray-600)
		@media (prefers-color-scheme dark)
			box-shadow inset 0 0 0 2px var(--gray-400)
		border-radius 4px
		transition all $transition

		&::after
			border-radius 20px
			position absolute
			transition all $transition
			background var(--theme-500)

	svg
		transition $transition
		transform scale(0)
		color transparent
		margin 2px

	input
		// visibility hidden
		position absolute
		top 0
		left 0
		opacity 0

		&:checked + span
			background var(--theme-500)
			box-shadow inset 0 0 0 2px var(--theme-500)

			svg
				color white
				transform scale(1)


	&:hover
		span
			box-shadow inset 0 0 0 2px var(--theme-500)

.radio
	span
		border-radius 20px

		&::after
			content " "
			top 5px
			left 5px
			width 10px
			height @width
			transform scale(0)

	input:checked + span::after
		transform scale(1)
		background white

.switch
	padding 0 0 0 10px // 2px base padding 10px circle padding

	&:hover span
		box-shadow none
		&::after
			background var(--theme-500)

	span
		width 24px
		height 14px
		border-radius 20px
		margin-right 10px
		box-shadow none
		background var(--gray-500)

		&::after
			content " "
			top 50%
			transform translate(-50%, -50%)
			left 0
			background var(--gray-600)
			width 20px
			height @width

	input
		margin 0 8px
		width 20px

		&:checked + span

			box-shadow none
			background var(--theme-300)
			&::after
				left 100%
				transform translate(-50%, -50%)
				background var(--theme-500)