:root{
	--checkbox-radio-size:18px;
	--checkbox-radio-gap:var(--space-xxs);
	--checkbox-radio-border-width:1px;
	--checkbox-radio-line-height:1.4;
	--radio-marker-size:8px;
	--checkbox-marker-size:12px;
	--checkbox-radius:4px
}
.radio,.checkbox{
	position:absolute;
	padding:0;
	margin:0;
	margin-top:calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size))/2);
	opacity:0;
	height:var(--checkbox-radio-size);
	width:var(--checkbox-radio-size);
	pointer-events:none
}
.radio+label,.checkbox+label{
	display:inline-block;
	line-height:var(--checkbox-radio-line-height);
	-webkit-user-select:none;
	user-select:none;
	cursor:pointer;
	padding-left:calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap))
}
.radio+label::before,.checkbox+label::before{
	content:"";
	box-sizing:border-box;
	display:inline-block;
	position:relative;
	vertical-align:middle;
	top:-.1em;
	margin-left:calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
	flex-shrink:0;
	width:var(--checkbox-radio-size);
	height:var(--checkbox-radio-size);
	background-color:var(--color-bg);
	border-width:var(--checkbox-radio-border-width);
	border-color:hsla(var(--color-contrast-low-h),var(--color-contrast-low-s),var(--color-contrast-low-l),0.65);
	border-style:solid;
	box-shadow:var(--shadow-xs);
	background-repeat:no-repeat;
	background-position:center;
	margin-right:var(--checkbox-radio-gap);
	transition:transform .2s,border .2s
}
.radio:not(:checked):not(:focus)+label:hover::before,.checkbox:not(:checked):not(:focus)+label:hover::before{
	border-color:hsla(var(--color-contrast-low-h),var(--color-contrast-low-s),var(--color-contrast-low-l),1)
}
.radio+label::before{
	border-radius:50%
}
.checkbox+label::before{
	border-radius:var(--checkbox-radius)
}
.radio:checked+label::before,.checkbox:checked+label::before{
	background-color:var(--color-primary);
	box-shadow:var(--shadow-xs);
	border-color:var(--color-primary);
	transition:transform .2s
}
.radio:active+label::before,.checkbox:active+label::before{
	transform:scale(.8);
	transition:transform .2s
}
.radio:checked:active+label::before,.checkbox:checked:active+label::before{
	transform:none;
	transition:none
}
.radio:checked+label::before{
	background-image:url(data:image/svg+xml;
	charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGcgY2xhc3M9J25jLWljb24td3JhcHBlcicgZmlsbD0nI2ZmZmZmZic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzgnIGZpbGw9JyNmZmZmZmYnPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
	background-size:var(--radio-marker-size)
}
.checkbox:checked+label::before{
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgdmlld0JveD0nMCAwIDEyIDEyJz48cG9seWxpbmUgcG9pbnRzPScxIDYuNSA0IDkuNSAxMSAyLjUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGRkZGRicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=);
	background-size:var(--checkbox-marker-size)
}
.radio:checked:active+label::before,.checkbox:checked:active+label::before,.radio:focus+label::before,.checkbox:focus+label::before{
	border-color:var(--color-primary);
	box-shadow:0 0 0 3px hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),0.2)
}
.radio--bg+label,.checkbox--bg+label{
	padding:var(--space-4xs) var(--space-3xs);
	padding-left:calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-3xs));
	border-radius:var(--radius-md);
	transition:background .2s
}
.radio--bg+label:hover,.checkbox--bg+label:hover{
	background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),0.075)
}
.radio--bg:active+label,.checkbox--bg:active+label,.radio--bg:focus+label,.checkbox--bg:focus+label{
	background-color:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),0.1)
}