
input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	color: var(--input-default-color);
	background: var(--input-default-background);
	border: 1px solid var(--input-default-border);
	border-radius: 4px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: unset;
	transition: 250ms all ease-out;
	cursor: pointer;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="radio"]:hover,
input[type="radio"]:focus {
	color: var(--input-focus-color);
	background: var(--input-focus-background);
	transition: 250ms all ease-out;
	cursor: pointer;
}

input[type="checkbox"]:checked {
	background: var(--input-active-background);
	cursor: no-drop;
}

input[type="radio"]:checked {
	background: var(--input-active-background);
	cursor: pointer;
}

input[type="checkbox"][disabled],
input[type="checkbox"][disabled]:hover,
input[type="checkbox"][disabled]:focus,
input[type="checkbox"][disabled]:checked,
input[type="radio"][disabled],
input[type="radio"][disabled]:hover,
input[type="radio"][disabled]:focus,
input[type="radio"][disabled]:checked {
	color: var(--input-disabled-color);
	background: var(--input-disabled-background);
	cursor: not-allowed;
}
