/* Checkbox */
.image-input-check{
	position:relative;
	display:inline-block;
	width:75px; height:75px;
	border:2px solid black;
	overflow:hidden;
	cursor:pointer;

	background-size:cover;
	background-position:center;
}
.image-input-check input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.image-input-check::before{
	content:"";
	display:block;
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	background:black;
	opacity:0;
	transition: opacity 100ms ease-in-out;
}
.image-input-check:has(input:checked)::before{
	opacity:0.7;
}
.image-input-check::after{
	content: "";
	mask:url(../images/checkmark.svg);
	-webkit-mask:url(../images/checkmark.svg);
	display:block;
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;

	transform: scale(0);
	transition: transform 100ms ease-in-out;
}
.image-input-check:has(input:checked)::after{
	transform:scale(0.8);
}
.image-input-check:has(input:focus){
	border-color: rgb(32, 140, 212);
	box-shadow: 0px 0px 4px rgb(32, 140, 212);
}

/* Radio Button */
.image-input-radio{
	position:relative;
	display:inline-block;
	width:75px; height:75px;
	border:2px solid black;
	border-radius:100%;
	overflow:hidden;
	cursor:pointer;

	background-size:cover;
	background-position:center;
}
.image-input-radio input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.image-input-radio::before{
	content:"";
	display:block;
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	background:black;
	opacity:0;
	transition: opacity 100ms ease-in-out;
}
.image-input-radio:has(input:checked)::before{
	opacity:0.7;
}
.image-input-radio::after{
	content:"";
	display:block;
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	border-radius:100%;
	background:white;

	transform: scale(0);
	transition: transform 100ms ease-in-out;
}
.image-input-radio:has(input:checked)::after{
	transform:scale(0.6);
}
.image-input-radio:has(input:focus){
	border-color: rgb(32, 140, 212);
	box-shadow: 0px 0px 4px rgb(32, 140, 212);
}