// 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

@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
			@include left(0)
	> span
		position: absolute
		width: 100%
		margin: 0
		font-weight: normal
		@include text-align(left)
		@include left(0)
		span
			position: absolute
			top: 0
			z-index: 5
			display: block
			width: 50%
			text-align: center
			@include left(0)
			&:last-child
				@include left(50%)
	a
		position: absolute
		top: 0
		z-index: 4
		display: block
		width: 50%
		height: 100%
		padding: 0
		@include left(50%)

// Radio Switch
@mixin switch-toggle()
	@include switch-shared()
	position: relative
	input
		position: absolute
		opacity: 0
	label
		position: relative
		z-index: 2
		width: 50%
		height: 100%
		margin: 0
		text-align: center
		@include float(left)
	a
		position: absolute
		top: 0
		padding: 0
		z-index: 1
		width: 50%
		height: 100%
		color: white
		border: solid 1px #279CBB
		background-color: #2eacce
		@include left(0)
		@include box-shadow('#1B7088' 0 -1px 0 inset)
	input:last-of-type:checked ~ a
		border: solid 1px #CA6F6F
		background-color: #E08F95
		@include left(50%)
		@include box-shadow('#5C5C5C' 0 -1px 0 inset)
	input:disabled ~ a
		border: solid 1px lighten(gray,20%) !important
		background-color: lighten(gray,30%)	!important
		@include box-shadow(lighten(gray,20%) 0 -1px 0 inset !important)
	//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
				@include left($width * ($j - 1) * 1%)
		&.switch-#{$state} input:checked:last-of-type ~ a
			@include 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
		margin-top: 3px
		background-color: #eee
		border-radius: 3px
		color: #333
		text-align: center
		@include box-shadow(rgba(black,0.15) 0 1px 4px 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: white
		> 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