
/* checkbox */
.checkbox {
	label {
		display: inline-flex;
		align-items: center;
		margin-bottom: 0;
	}
	--checkbox-right-margin: 8px;

	.label-area {
		line-height: 1;
		font-size: var(--text-sm);
	}

	.input-area, .disp-area {
		display: flex;
	}
}

input[type="checkbox"] {
	position: relative;
	width: 0 !important;
	height: var(--custom-checkbox-size);
	margin-right: calc(var(--custom-checkbox-size) + var(--checkbox-right-margin)) !important;
	font-size: calc(var(--custom-checkbox-size) - 1px);

	&:before {
		width: var(--custom-checkbox-size);
		height: var(--custom-checkbox-size);
		position: absolute;
		top: 0;
		display: inline-block;
		line-height: 1;
		text-align: center;
		content: ' ';
		border: 1px solid var(--gray-400);
		box-sizing: border-box;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	&:checked:before {
		content: url("data: image/svg+xml;utf8, <svg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
		background: linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
		box-shadow: none;
		border: none;
	}


	&.disabled-deselected:before, &[disabled]:before {
		background: var(--disabled-control-bg);
		border: 0.5px solid var(--gray-300);
		box-sizing: border-box;
		box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	&.disabled-selected:before {
		content: url("data: image/svg+xml;utf8, <svg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
		background: $gray-500;
		box-sizing: border-box;
		box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		line-height: 10px;
	}
}

// Firefox doesn't support
// pseudo elements on checkbox
html.firefox, html.safari {
	:root {
		--custom-checkbox-size: 0px;
	}
	input[type="checkbox"] {
		width: var(--base-checkbox-size) !important;
		height: var(--base-checkbox-size);
		margin-right: var(--checkbox-right-margin) !important;
	}
}

.frappe-card {
	@include card();
}

.frappe-control[data-fieldtype="Select"] .control-input {
	position: relative;

	select {
		/* for Firefox */
		-moz-appearance: none;
		/* for Chrome */
		-webkit-appearance: none;
	}

	.icon {
		position: absolute;
		top: 8px;
		height: 15px;
		right: 12px;
		pointer-events: none;
		use {
			stroke: var(--text-muted);
		}
	}
}
