// Credit to https://github.com/Wikiki/bulma-switch
// This is a modified verison of their work to make it compatible with Bulma v1.0

@charset "UTF-8"

$primary: #fff !default
$white: #fff !default
$grey: #b4b4b4
$size-normal: 1rem
$size-small: 0.75rem
$size-medium: 1.25rem
$size-large: 1.5rem
$radius-rounded: 9999px
$radius-small: 0.25rem
$radius-medium: 0.5em
$radius-large: 0.75rem
$control-height: 24px
$control-line-height: 24px
$colors: () !default

$switch-background: $grey !default
$switch-border: .1rem solid transparent !default
$switch-background-active: $primary !default
$switch-radius: 4px !default
$switch-paddle-background: $white !default
$switch-paddle-background-active: $primary !default
$switch-paddle-offset: 0.25rem !default
$switch-paddle-transition: all 0.25s ease-out !default
$switch-focus: 1px dotted $grey !default

=switch-size($size)
	$switch-height: $size * 1.5
	$switch-width: $switch-height * 2
	$paddle-height: $switch-height - ($switch-paddle-offset * 2)
	$paddle-width: $switch-height - ($switch-paddle-offset * 2)
	$paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5)

	+ label
		position: relative
		display: inline-flex
		align-items: center
		justify-content: flex-start
		font-size: $size
		height: $control-height
		line-height: $control-line-height
		padding-left: $switch-width + .5
		padding-top: .2rem
		cursor: pointer

		&::before,
		&:before
			position: absolute
			display: block
			top: calc( 50% - #{$switch-height} * 0.5 )
			left: 0
			width: $switch-width
			height: $switch-height
			border: $switch-border
			border-radius: $switch-radius
			background: $switch-background
			content: ''

		&::after,
		&:after
			display: block
			position: absolute
			top: calc( 50% - #{$paddle-height} * 0.5 )
			left: $switch-paddle-offset
			width: $paddle-width
			height: $paddle-height
			transform: translate3d(0, 0, 0)
			border-radius: $switch-radius
			background: $switch-paddle-background
			transition: $switch-paddle-transition
			content: ''

		.switch-active,	.switch-inactive
			font-size: $size - 0.1
			z-index: 1
			margin-top: -4px
		&.has-text-inside
			.switch-inactive
				margin-left: -($paddle-active-offest + 0.3)
			.switch-active
				margin-left: -($paddle-active-offest * 2)


	&.is-rtl
		+ label
			padding-left: 0
			padding-right: $switch-width + .5
			&::before,
			&:before
				left: auto
				right: 0
			&::after,
			&:after
				left: auto
				right: $paddle-active-offest

	&:checked
		+ label
			&::before,
			&:before
				background: $switch-background-active
			&::after
				left: $paddle-active-offest
		&.is-rtl
			+ label
				&::after,
				&:after
					left: auto
					right: $switch-paddle-offset

	&.is-outlined
		+ label
			&::before,
			&:before
				background-color: transparent
				border-color: $switch-background
			&::after,
			&:after
				background: $switch-background
		&:checked
			+ label
				&::before,
				&:before
					background-color: transparent
					border-color: $switch-background-active
				&::after,
				&:after
					background: $switch-paddle-background-active

	&.is-thin
		+ label
			&::before,
			&:before
				top: divide($switch-height, 2.75)
				height: divide($switch-height, 4)
			&::after,
			&:after
				box-shadow: 0px 0px 3px $grey

	&.is-rounded
		+ label
			&::before,
			&:before
				border-radius: $radius-large * 4
			&::after,
			&:after
				border-radius: 50%


.switch[type="checkbox"]
	outline: 0
	user-select: none
	display: inline-block
	position: absolute
	opacity: 0

	&:focus
		+ label
			&::before,
			&:before,
			&::after,
			&:after
				outline: $switch-focus

	&[disabled]
		cursor: not-allowed
		+ label
			opacity: 0.5
			&::before,
			&:before
				opacity: 0.5
			&::after,
			&:after
				opacity: 0.5
			&:hover
				cursor: not-allowed

	+switch-size($size-normal)
	&.is-small
		+switch-size($size-small)
	&.is-medium
		+switch-size($size-medium)
	&.is-large
		+switch-size($size-large)

	@each $name, $pair in $colors
		$color: nth($pair, 1)
		$color-invert: nth($pair, 2)
		&.is-#{$name}
			+ label
				.switch-active
					display: none
				.switch-inactive
					display: inline-block
			&:checked
				+ label
					&::before,
					&:before
						background: $color
					.switch-active
						display: inline-block
					.switch-inactive
						display: none
			&.is-outlined
				&:checked
					+ label
						&::before,
						&:before
							background-color: transparent
							border-color: $color !important
						&::after,
						&:after
							background: $color
			&.is-thin
				&.is-outlined
					+ label
						&::after,
						&:after
							box-shadow: none
		&.is-unchecked-#{$name}
			+ label
				&::before,
				&:before
					background: $color
			&.is-outlined
				+ label
					&::before,
					&:before
						background-color: transparent
						border-color: $color !important
					&::after,
					&:after
						background: $color

	// .switch.is-grey-lighter
	$shadow-blue-name: "shadow-blue";
	$shadow-blue-color: #7697a4;
	&.is-#{$shadow-blue-name}
		+ label
			.switch-active
				display: none
			.switch-inactive
				display: inline-block
		&:checked
			+ label
				&::before,
				&:before
					background: $shadow-blue-color
				.switch-active
					display: inline-block
				.switch-inactive
					display: none
		&.is-outlined
			&:checked
				+ label
					&::before,
					&:before
						background-color: transparent
						border-color: $shadow-blue-color !important
					&::after,
					&:after
						background: $shadow-blue-color
		&.is-thin
			&.is-outlined
				+ label
					&::after,
					&:after
						box-shadow: none
	&.is-unchecked-#{$shadow-blue-name}
		+ label
			&::before,
			&:before
				background: $shadow-blue-color
		&.is-outlined
			+ label
				&::before,
				&:before
					background-color: transparent
					border-color: $shadow-blue-color !important
				&::after,
				&:after
					background: $shadow-blue-color

.field-body
	.switch[type="checkbox"]
		+ label
			margin-top: .375em