@import "../config.styl"

$backColor = #757575

.label
	position relative
	display flex
	padding-left 8px
	margin 8px
	user-select none

	span
		top 0
		left 0
		width 20px
		height @width
		position absolute
		box-shadow inset 0 0 0 2px $backColor
		border-radius 2px
		transition all $transition

		&::after
			border-radius 20px
			position absolute
			transition all $transition
			background $default

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

	input
		visibility hidden
		width 20px
		height @width
		margin 0
		&:checked + span
			background rgba($default, .5)
			box-shadow inset 0 0 0 2px $default

			svg
				color white
				transform scale(1)


	&:hover
		span
			box-shadow inset 0 0 0 2px black

.radio
	margin-left 18px // Margin + margin for Circle
	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 2px 0 2px 10px // 2px base padding 10px circle padding

	&:hover span
		box-shadow none

		&::after
			background black

	span
		width 28px
		height 14px
		border-radius 20px
		top 50%
		box-shadow none
		background rgba($backColor, .5)
		transform translateY(-50%)

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

	input
		margin 0 8px
		width 20px

		&:checked + span
			box-shadow none

			&::after
				left 100%
				transform translate(-50%, -50%)
				background $default

.primary
	$color = $primary

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none

.secondary
	$color = $secondary

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none

.info
	$color = $info

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none

.success
	$color = $success

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none

.danger
	$color = $danger

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none

.warning
	$color = $warning

	input:checked + span
		background rgba($color, .5)
		box-shadow inset 0 0 0 2px $color

		&::after
			background $color

	&.switch
		input:checked + span
			box-shadow none