//@import "../../../abstracts/abstracts";

.dbq-form {
	.checkbox {
		padding: 0;
		background: $modal-input-background;
		border: $field-border-width solid $modal-border-color;
		label {
			font-weight: $field-font-weight;
			font-size: $field-font-size;
			line-height: 20px;
			padding: $field-checkbox-padding-y 10px;
			color: $modal-input-color;
			text-indent: 0;
			background: 0;
			border: 0;
			border-radius: 0;
			margin: 0;
			width: 100%;
			&:after {
				content: "";
				display: table;
				clear: both;
			}
			input[type="checkbox"] {
				display: none;
				+ {
					.cr {
						>.cr-icon {
							transform: scale(3) rotateZ(-20deg);
							opacity: 0;
							transition: all 0.3s ease-in;
						}
					}
				}
				&:checked {
					+ {
						.cr {
							>.cr-icon {
								transform: scale(1) rotateZ(0deg);
								opacity: 1;
							}
						}
					}
				}
				&:disabled:not(:checked) {
					+ {
						.cr {
							opacity: 1;
							cursor: not-allowed;
							background: transparent !important;
							border-color: $modal-label-color !important
						}
					}
				}
			}
		}
		.cr {
			position: relative;
			display: inline-block;
			width: 20px;
			height: 20px;
			float: left;
			margin-right: 0.5em;
			border-radius: 5px;
			border: 2px solid $modal-border-color;
			background: $modal-input-background;
			cursor: pointer;
			.cr-icon {
				position: absolute;
				font-size: 0.8em;
				line-height: 0;
				margin: 0;
			}
			svg.cr-icon {
				width: 12px;
				height: 12px;
				top: 2px;
				left: 2px;
			}
		}
		input[type="checkbox"] {
			&:checked {
				+ {
					.cr {
						border: 2px solid color(button-border-color) !important;
						background: $color-primary !important;
						&:hover {
							border: 2px solid color(button-border-color) !important;
							background: $color-primary !important;
						}
						svg {
							fill: #ffffff;
						}
					}
				}
			}
		}
		&:hover {
			.cr {
				border: 2px solid color(button-border-color) !important;
				background: $color-primary !important;
			}
		}
	}
	.dbq-label-disabled + .checkbox {
		background: $modal-disabled-color;
		border: $field-border-width solid $modal-disabled-color;
		.cr {
			cursor: not-allowed;
		}
	}
	.dbq-form-group {
		.checkbox {
			label {
				display: block;
				border: 0 !important;
				padding: 5px !important;
			}
		}
	}
	.dbq-input-no-label {
		.input-group {
			.cr-icon {
				border-radius: 0 0 0 8px;
			}
		}
	}
}

.modal,
.dbq-popup {
	form[data-view-mode="View"] {
		.dbq-form {
			.checkbox {
				background: $modal-disabled-color !important;
				border: $field-border-width solid $modal-disabled-color !important;
				.cr {
					background: transparent;
					border: 2px solid color(button-border-color);
				}
				&:hover {
					.cr {
						background: transparent !important;
						border: 2px solid color(button-border-color) !important;
					}
					input[type="checkbox"] {
						&:checked {
							+ {
								.cr {
									border: 2px solid color(button-background-color) !important;
									background: color(button-background-color) !important;
									&:hover {
										opacity: 1;
										cursor: not-allowed;
									}
								}
							}
						}
					}
				}
			}
			.dbq-no-file-found {
				background: $modal-disabled-color;
				border: $field-border-width solid $modal-disabled-color;
			}
			.dbq-form-group {
				.checkbox {
					background: $modal-disabled-color;
					padding: 0;
					border: 0 !important;
				}
				label.dbq-label-disabled {
					background: $modal-disabled-color;
					border: $field-border-width solid $modal-disabled-color !important;
				}
			}
		}
	}
	.dbq-form {
		.checkbox {
			&:after {
				content: "";
				clear: both;
				display: table;
			}
		}
		.dbq-form-group,
        .dbq-form-group-padding,
        .dbq-form-group-no-padding {
			.checkbox {
				padding: 0;
				border: 0 !important;
			}
		}
	}
	form[data-view-mode="Delete"] {
		.dbq-form {
			.checkbox {
				background: $modal-disabled-color !important;
				border: $field-border-width solid $modal-disabled-color;
				.cr {
					background: transparent;
					border: 2px solid color(button-border-color);
				}
				&:hover {
					.cr {
						background: transparent !important;
						border: 2px solid color(button-border-color) !important;
					}
					input[type="checkbox"] {
						&:checked {
							+ {
								.cr {
									border: 2px solid color(button-background-color) !important;
									background: color(button-background-color) !important;
									&:hover {
										opacity: 1;
										cursor: not-allowed;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	form[data-view-mode="View"] {
		.checkbox {
			input[type="checkbox"] {
				&:checked {
					+ {
						.cr {
							border: 2px solid color(button-background-color) !important;
							background: color(button-background-color) !important;
						}
					}
				}
			}
			&:hover {
				input[type="checkbox"] {
					&:checked {
						+ {
							.cr {
								border: 2px solid color(button-background-color) !important;
								background: color(button-background-color) !important;
							}
						}
					}
				}
				.cr {
					border: 2px solid #647987 !important;
					background: #647987 !important;
					cursor: not-allowed;
				}
			}
			.cr {
				border: 2px solid #647987 !important;
				background: #647987 !important;
				cursor: not-allowed;
			}
		}
		div[data-element-type="InputProperty"] {
			.cr {
				cursor: not-allowed;
			}
		}
		input[type="checkbox"] {
			&:checked {
				&:hover {
					+ {
						.cr {
							border: 2px solid color(button-border-color) !important;
							background: $color-primary !important;
							svg {
								display: block !important;
							}
						}
					}
				}
			}
		}
		.dbq-form-group {
			.row[data-element-type="InputProperty"] {
				cursor: not-allowed;
			}
		}
	}
}