@import '../../../sass/helpers/functions'

$checkbox-active-background-color: $primary !default
$checkbox-checkmark-color: $primary-invert !default

.b-checkbox 
	&.checkbox 
		outline: none
		display: inline-flex
		align-items: center
		@include unselectable
		& + .checkbox 
			margin-left: 0.5em
		input[type='checkbox'] 
			position: absolute
			left: 0
			opacity: 0
			outline: none
			z-index: -1
			+ .check 
				width: 1.25em
				height: 1.25em
				flex-shrink: 0
				border-radius: $radius
				border: 2px solid $grey
				transition: background $speed-slow $easing
			&:checked + .check 
				background: $checkbox-active-background-color url(checkmark($checkbox-checkmark-color)) no-repeat center center
				border-color: $checkbox-active-background-color
				@each $name, $pair in $colors 
					$color: nth($pair, 1)
					$color-invert: nth($pair, 2)
					&.is-#{$name}
						background: $color url(checkmark($color-invert)) no-repeat center center
						border-color: $color
			&:indeterminate + .check 
				background: $checkbox-active-background-color url(indeterminate($checkbox-checkmark-color)) no-repeat center center
				border-color: $checkbox-active-background-color
				@each $name, $pair in $colors 
					$color: nth($pair, 1)
					$color-invert: nth($pair, 2)
					&.is-#{$name}
						background: $color url(indeterminate($color-invert)) no-repeat center center
						border-color: $color
		.control-label 
			padding-left: 0.5em
			@each $name, $pair in $colors
				$color: nth($pair, 1)
				$color-invert: findColorInvert($color)
				&.is-#{$name}
					&:hover 
						color: darken($color-invert, 10%)
		&[disabled] 
			opacity: 0.5
		&:hover 
			input[type='checkbox'] + .check 
				border-color: $checkbox-active-background-color
				@each $name, $pair in $colors
					$color: nth($pair, 1)
					&.is-#{$name}
						border-color: $color
		&:focus 
			input[type='checkbox'] + .check 
				box-shadow: 0 0 0.5em bulmaRgba($grey, 0.8)
			input[type='checkbox']:checked + .check 
				box-shadow: 0 0 0.5em bulmaRgba($checkbox-active-background-color, 0.8)
				@each $name, $pair in $colors 
					$color: nth($pair, 1)
					&.is-#{$name}
						box-shadow: 0 0 0.5em bulmaRgba($color, 0.8)
		&.is-small 
			@include control-small
		&.is-medium 
			@include control-medium
		&.is-large 
			@include control-large
