checkbox-radio.scss

@import 'bower_components/d2l-colors/d2l-colors.scss';
@import 'bower_components/vui-focus/focus.scss';

@mixin _vui-input-checkbox-radio-label(
		$type,
		$padding-right: 0
	) {

	display: inline-block;
	padding-left: 1.7rem;
	padding-right: $padding-right;
	vertical-align: middle;

	& > input[type="#{$type}"] {
		margin-top: -0.2rem;
		margin-right: 0.5rem;
		margin-left: -1.7rem;
	}

	[dir="rtl"] & {
		padding-right: 1.7rem;
		padding-left: $padding-right;
		& > input[type="#{$type}"] {
			margin-left: 0.5rem;
			margin-right: -1.7rem;
		}
	}

	&:last-of-type {
		margin-bottom: 0.5rem;
	}

}

@mixin _vui-input-legacy-outline() {
	outline: 2px solid $d2l-color-celestine-light-2;
}

@mixin _vui-input-checkbox-radio-helper(
		$appearance,
		$background-image-checked,
		$border-radius
	) {

	@include vui-input(
		$background-color: $d2l-color-woolonardo,
		$background-color-hover: $d2l-color-gypsum,
		$border-radius: $border-radius,
		$box-shadow: none,
		$has-text: false,
		$height: 1.2rem,
		$padding: 0,
		$padding-focus: 0,
		$width: 1.2rem
	);

	appearance: none;
	background-position: center center;
	background-repeat: no-repeat;

	&:checked {
		background-image: $background-image-checked;
	}

	/* IE (not Edge) only */
	@media screen and (min-width:0\0) {
		&:focus {
			@include _vui-input-legacy-outline();
		}
	}
}