
@mixin checkbox-variant($color) {

	.checkbox.checkbox-#{'' + $color} {

		input[type="checkbox"] {

			+ label {

				&::before {

					border-color: get-color($color, 500);
					background-color: get-color($color, 500);

				}

				&:hover {

					&::before {

						border-color: get-color($color, 400);
						background-color: get-color($color, 300);

					}

				}

			}

			&:checked {
				+ label {
				&:hover {

					&::before {

						border-color: get-color($color, 400);
						background-color: get-color($color, 400);

					}

				}
				}
			}

		}

	}

}


.checkbox {

	padding-left: 20px;

	label {

		&:hover {

			&::before {

				border-color: get-color(teal, 900);
				background-color: get-color(grey, 100);

			}

		}

		display: inline-block;
		vertical-align: middle;
		position: relative;
		padding-left: 8px;

		&::before {

			content: "";
			display: inline-block;
			position: absolute;
			width: 18px;
			height: 18px;
			left: 0;
			top: 3px;
			margin-left: -20px;
			border: 2px solid get-color(grey, 700);
			border-radius: 1px;
			background-color: transparent;

			@include transition(all .28s cubic-bezier(0.4,0,.2,1));

		}
		
		&::after {

			display: inline-block;
			position: absolute;
			width: 16px;
			height: 16px;
			left: 0;
			top: -4px;
			margin-left: -20px;
			padding-left: 0;
			padding-top: 0;
			font-size: 17px;
			color: get-color(grey, 100);
			background-color: transparent;

		}

		&.checkbox-inline {
			margin-right: 40px;
		}

	}


	input[type="checkbox"] {

		width: 1px;
		height: 1px;
		opacity: 0;

		&:checked {

			+ label {
				
				&::before {

					border-color: get-color(teal, 500);
					background-color: get-color(teal, 500);

				}

				&::after {

					background: none !important;
				    font-family: 'Material Icons';
				    content: "\E5CA";


				}

			}

			&:disabled {

				+ label {

					&::before {

						border-color: get-color(grey, 500) !important;
						background-color: get-color(grey, 500) !important;

					}

				}

			}

		}

		&:disabled {

			+ label {

				&:hover {

					cursor: not-allowed;

				}

				&::before {

					border-color: get-color(grey, 500) !important;
					background-color: get-color(grey, 500) !important;
					cursor: not-allowed;

				}

			}

			&:checked + label::after {

				color: get-color(grey, 300) !important;
				cursor: not-allowed;

			}

		}

	}

}

@each $color in map-keys(map-get($color-map, colors)) {

	@include checkbox-variant($color);

}
