/**
 * global_input_checkbox - ready for var
 * @version	2.0
 * @release	29-01-2023
 * @author	msolowski Marcin Sołowski
 * @website	http://msolowski.pl
 */

.global_checkbox
{
	--global_checkbox_font_family:		'dashicons';
	--global_checkbox_font_size:		var(--global_font_size_p);
	--global_checkbox_font_weight:		400;
	--global_checkbox_color:			var(--root_color_lead);
	--global_checkbox_background_color:	var(--root_color_white);
	--global_checkbox_border_color:		#b7b7b7;
	--global_checkbox_border_width:		1px;
	--global_checkbox_border_radius:	4px;
	--global_checkbox_transition:		var(--global_transition);
	--global_checkbox_line_height:		1;

	/**********************************************************************************/

	--min_global_checkbox_width:	16;
	--max_global_checkbox_width:	16;
	--global_checkbox_width:
		clamp(calc(var(--min_global_checkbox_width) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_checkbox_width) - var(--min_global_checkbox_width)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_checkbox_width)) * 1px)
		+ ((var(--max_global_checkbox_width) - var(--min_global_checkbox_width)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_checkbox_width) * 1px));

	--min_global_checkbox_height:	16;
	--max_global_checkbox_height:	16;
	--global_checkbox_height:
		clamp(calc(var(--min_global_checkbox_height) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_checkbox_height) - var(--min_global_checkbox_height)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_checkbox_height)) * 1px)
		+ ((var(--max_global_checkbox_height) - var(--min_global_checkbox_height)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_checkbox_height) * 1px));

	/**********************************************************************************/

	--global_checkbox_background_color_h:	var(--root_color_white);
	--global_checkbox_border_color_h:		#b7b7b7;
}

/* customize the label (the container) */
.global_checkbox label
{
	display: block !important;
	position: relative !important;
	cursor: pointer !important;
/*	line-height: 1 !important; */
}

/* hide the browser's default checkbox */
.global_checkbox input[type="checkbox"]
{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

/* create a custom checkbox */
.global_checkbox label span::before
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--global_checkbox_width);
	height: var(--global_checkbox_height);
	border-color: var(--global_checkbox_border_color);
	border-width: var(--global_checkbox_border_width);
	border-radius: var(--global_checkbox_border_radius);
	background-color: var(--global_checkbox_background_color);
	border-style: solid;
	transition: var(--global_checkbox_transition);
/*	transform: translateY(-50%); */
}

/* on mouse-over */
.global_checkbox label:hover input[type="checkbox"] ~ span::before
{
	border-color: var(--global_checkbox_border_color_h);
}

/* when the checkbox is checked */
.global_checkbox input[type="checkbox"]:checked ~ span::before
{
	border-color: var(--global_checkbox_border_color_h);
	background-color: var(--global_checkbox_background_color_h);
}

/* create the checkmark/indicator (hidden when not checked) */
/* style the checkmark/indicator */
.global_checkbox label span::after
{
	content: '\f15e';
	display: block;
	position: absolute;
	top: calc(var(--global_checkbox_height) * 0.5);
	left: calc(var(--global_checkbox_width) * 0.5);
	font-family: var(--global_checkbox_font_family);
	font-size: calc(var(--global_checkbox_width) * 1.1);
	font-weight: var(--global_checkbox_font_weight);
	color: var(--global_checkbox_color);
	line-height: var(--global_checkbox_line_height);
	transition: var(--global_checkbox_transition);
	opacity: 0;
	z-index: 1;
	transform: translate(-50%, -50%) scale(0, 0)
}

/* show the checkmark when checked */
.global_checkbox [type="checkbox"]:checked ~ span::after
{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1, 1);
}

/**********************************************************************************/

.global_checkbox br
{
	display: none
}

.global_checkbox span
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;

}

.global_checkbox label span
{
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: calc(var(--global_checkbox_width) + var(--global_size_10));
	text-align: left;
	display: inline-block;
}