$radio-active-background-color: $primary !default

.b-radio
	&.radio
		outline: none
		display: inline-flex
		align-items: center
		@include unselectable
		& + .radio
			margin-left: 0.5em
		input[type='radio']
			position: absolute
			left: 0
			opacity: 0
			outline: none
			z-index: -1
			+ .check
				display: flex
				align-items: center
				justify-content: center
				flex-shrink: 0
				width: 1.25em
				height: 1.25em
				border: 2px solid $grey
				border-radius: 50%
				transition: background $speed-slow $easing
				&:before
					content: ''
					border-radius: 50%
					width: 0.625em
					height: 0.625em
					background: $radio-active-background-color
					transform: scale(0)
					transition: transform $speed-slow $easing
				@each $name, $pair in $colors
					$color: nth($pair, 1)
					&.is-#{$name}:before
						background: $color
			&:checked + .check
				border-color: $radio-active-background-color
				@each $name, $pair in $colors
					$color: nth($pair, 1)
					&.is-#{$name}
						border-color: $color
				&:before
					transform: scale(1)
		.control-label
			padding-left: 0.5em
		&[disabled]
			opacity: 0.5
		&:hover
			input[type='radio'] + .check
				border-color: $radio-active-background-color
				@each $name, $pair in $colors
					$color: nth($pair, 1)
					&.is-#{$name}
						border-color: $color
		&:focus
			input[type='radio'] + .check
				box-shadow: 0 0 0.5em bulmaRgba($grey, 0.8)

			input[type='radio']:checked + .check
				box-shadow: 0 0 0.5em bulmaRgba($radio-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
