input {

	&[type="checkbox"],
	&[type="radio"] {
		width: 1.125rem;
		height: 1.125rem;
		margin: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		appearance: none;
		outline: none;
		border: 2px solid $color-grey;

		@include inline-flex;
		@include transition;

		&:checked {
			background-color: $color-red;
			border-color: $color-red;
		}

		&:invalid {
			border-color: $color-danger;
		}

		&:focus,
		&:active {

			@include box-shadow(false, 0, 0, 0, 0.3125rem, rgba($color-red, 0.2));
		}
	}
	
	&[type="checkbox"] {

		@include border-radius;

		&:checked {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
		}
	}

	&[type="radio"] {

		@include border-radius(100%);

		&:checked {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
		}
	}
}

.minimal-scheme {

	input {

		&[type="checkbox"],
		&[type="radio"] {
			border-width: 1px;
		}

		&[type="checkbox"] {

			@include border-radius(0);
		}

	}
}