// CSS TOGGLE SWITCHES (Ionuț Colceriu)
// Licensed under Unlicense 
// https://github.com/ghinda/css-toggle-switch

@mixin switch-shared()
	display: block
	height: 26px
	*
		@include box-sizing(border-box)
	a
		display: block
		@include transition(all 0.3s ease-out)
	label,
	> span
		line-height: 26px
		vertical-align: middle
	// Outline the toggles when the inputs are focused

@mixin switch-light()
	@include switch-shared()
	position: relative
	overflow: visible
	padding: 0
	// Position the label over all the elements, except the slide-button (<a>)
	// Clicking anywhere on the label will change the switch-state
	label
		position: relative
		z-index: 3
		display: block
		width: 100%
	// Don't hide the input from screen-readers and keyboard access
	input
		position: absolute
		opacity: 0
		z-index: 5
		&:checked ~ a
			left: 0%
	> span
		position: absolute
		left: 0
		width: 100%
		margin: 0
		text-align: left
		span
			position: absolute
			top: 0
			left: 0
			z-index: 5
			display: block
			width: 50%
			text-align: center
			&:last-child
				left: 50%
	a
		position: absolute
		left: 50%
		top: 0
		z-index: 4
		display: block
		width: 50%
		height: 100%
		padding: 0


// Radio Switch
@mixin switch-toggle()
	@include switch-shared()
	position: relative
	// For callout panels in foundation
	padding: 0 !important
	input
		position: absolute
		opacity: 0
	label
		position: relative
		z-index: 2
		float: left
		width: 50%
		height: 100%
		margin: 0
		text-align: center
	a
		position: absolute
		top: 0
		left: 0
		padding: 0
		z-index: 1
		width: 50%
		height: 100%
	input:last-of-type:checked ~ a
		left: 50%
	//Generate styles for the multiple states
	@for $i from 1 through 3
		$state: $i + 2
		$width: 100 / ($i + 2)
		&.switch-#{$state}
			label,
			a
				width: $width * 1%
		@for $j from 2 through ($i + 1)
			&.switch-#{$state} input:checked:nth-of-type(#{$j}) ~ a
				left: $width * ($j - 1) * 1%
		&.switch-#{$state} input:checked:last-of-type ~ a
			left: 100 - $width * 1%


.switch a,
.switch-light span span
	display: none

@media only screen
	.switch-light
		@include switch-light()

	.switch
		@include switch-toggle()

	.prestashop-switch
		min-width: 150px
		background-color: #eee
		border-radius: 3px
		color: #333
		text-align: center
		font-weight: 400
		@include box-shadow(rgba(black,0.15) 0 1px 3px 1px inset)
		* 
			outline: 0!important
		label
			text-transform: uppercase
			color: #bbb
			font-weight: 400
			cursor: pointer
			@include transition(color 0.2s ease-out)
		input:checked + label
			color: #666
		input:not(:checked) + label
			i
				color: #999!important
		> span
			color: #666
			text-transform: uppercase
			cursor: pointer
		&.switch-light input:checked
			~ a
				border: solid 1px $brand-success
				background-color: lighten($brand-success,10%)
				@include box-shadow($brand-success 0 -1px 0 inset)
			~ span span
				&:first-of-type
					color: white
				&:last-of-type
					color: #ccc
		&.switch-light input
			~ a
				border: solid 1px $brand-danger
				background-color: lighten($brand-danger,10%)
				@include box-shadow($brand-danger 0 -1px 0 inset)
			~ span span
				&:first-of-type
					color: #ccc
				&:last-of-type
					color: white