@mixin selection-control($type) {
	--size: 2.4rem;
	width: var(--size);
	height: var(--size);
	margin: 0 1.2rem;
	border-radius: var(--input-radius);
	outline: none;
	vertical-align: bottom;
	-webkit-appearance: none;
	appearance: none;

	opacity: 0.56;
	background-image: url(../../lib/assets/#{$type}.svg);

	&:indeterminate {
		background-image: url(../../lib/assets/#{$type}-indeterminate.svg);
	}

	&:checked {
		background-image: url(../../lib/assets/#{$type}-marked.svg);
	}

	// supports mask but not houdini
	@supports (-webkit-mask-image: url()) or (mask-image: url()) {
		-webkit-mask: url(../../lib/assets/#{$type}.svg) center no-repeat;
		mask: url(../../lib/assets/#{$type}.svg) center no-repeat;
		background: RGB(var(--black), 0.56);
		opacity: 1;

		&:indeterminate,
		&:checked {
			background: RGB(var(--primary));
		}

		&:indeterminate {
			-webkit-mask-image: url(../../lib/assets/#{$type}-indeterminate.svg);
			mask-image: url(../../lib/assets/#{$type}-indeterminate.svg);
		}

		&:checked {
			-webkit-mask-image: url(../../lib/assets/#{$type}-marked.svg);
			mask-image: url(../../lib/assets/#{$type}-marked.svg);
		}
	}

	// supports houdini
	// @supports () {
	// }
}