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

.global_input
{
	--global_input_font_family:			var(--root_font_family);
	--global_input_font_size:			var(--global_font_size_p);
	--global_input_font_weight:			700;
	--global_input_color:				var(--root_color_black);
	--global_input_background_color:	var(--root_color_white);
	--global_input_border_color:		transparent;
	--global_input_border_width:		0;
	--global_input_border_radius:		0;
	--global_input_outline_color:		transparent;
	--global_input_outline_width:		2px;
	--global_input_transition:			var(--global_transition);
	--global_input_line_height:			1;

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

	--min_global_input_padding_tb: 12;
	--max_global_input_padding_tb: 15;
	--global_input_padding_top_bottom:
		clamp(calc(var(--min_global_input_padding_tb) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_input_padding_tb) - var(--min_global_input_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_input_padding_tb)) * 1px)
		+ ((var(--max_global_input_padding_tb) - var(--min_global_input_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_input_padding_tb) * 1px));

	--min_global_input_padding_lr: 15;
	--max_global_input_padding_lr: 20;
	--global_input_padding_left_right:
		clamp(calc(var(--min_global_input_padding_lr) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_input_padding_lr) - var(--min_global_input_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_input_padding_lr)) * 1px)
		+ ((var(--max_global_input_padding_lr) - var(--min_global_input_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_input_padding_lr) * 1px));

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

	--global_input_color_h:				var(--root_color_white);
	--global_input_background_color_h:	var(--root_color_dark);
	--global_input_border_color_h:		var(--root_color_dark);
	--global_input_outline_color_h:		var(--root_color_black);
}

.global_input input[type="text"],
.global_input input[type="email"],
.global_input input[type="password"],
.global_input input[type="tel"],
.global_input input[type="url"],
.global_input textarea
{
	font-family: var(--global_input_font_family) !important;
	font-size: var(--global_input_font_size) !important;
	font-weight: var(--global_input_font_weight) !important;
	color: var(--global_input_color) !important;
	padding-top: var(--global_input_padding_top_bottom) !important;
	padding-right: var(--global_input_padding_left_right) !important;
	padding-bottom: var(--global_input_padding_top_bottom) !important;
	padding-left: var(--global_input_padding_left_right) !important;
	border-color: var(--global_input_border_color) !important;
	border-width: var(--global_input_border_width) !important;
	border-style: solid !important;
	border-radius: var(--global_input_border_radius) !important;
	background-color: var(--global_input_background_color) !important;
	line-height: var(--global_input_line_height) !important;
	outline-color: var(--global_input_outline_color) !important;
	outline-width: var(--global_input_outline_width) !important;
	outline-style: solid !important;
	transition: var(--global_input_transition) !important;
	width: 100% !important;
	height: auto !important;
	display: flex!important;
	-webkit-user-select: auto !important;
	-moz-user-select: auto !important;
	-ms-user-select: auto !important;
	user-select: auto !important;
}

.global_input textarea
{
	resize: vertical !important;
	resize: none !important;
/*	min-height: 230px; */
	height: 190px;
	max-height: 230px;
}

.global_input input[type="text"]:hover,
.global_input input[type="email"]:hover,
.global_input input[type="password"]:hover,
.global_input input[type="tel"]:hover,
.global_input input[type="url"]:hover,
.global_input textarea:hover
{
	outline-color: var(--global_input_outline_color_h) !important;
}

.global_input input[type="text"]:focus,
.global_input input[type="email"]:focus,
.global_input input[type="password"]:focus,
.global_input input[type="tel"]:focus,
.global_input input[type="url"]:focus,
.global_input textarea:focus
{
	outline-color: var(--global_input_outline_color_h) !important;
}

.global_input input[type="text"]:focus-visible,
.global_input input[type="email"]:focus-visible,
.global_input input[type="password"]:focus-visible,
.global_input input[type="tel"]:focus-visible,
.global_input input[type="url"]:focus-visible,
.global_input textarea:focus-visible
{
	outline-color: var(--global_input_outline_color_h) !important;
}

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

.global_input input::-webkit-input-placeholder /* Chrome/Opera/Safari */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input input::-ms-input-placeholder /* IE Edge */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input input:-ms-input-placeholder /* IE */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input input::-moz-placeholder /* Firefox 19+ */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input input::placeholder
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input input:placeholder
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

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

.global_input textarea::-webkit-input-placeholder /* Chrome/Opera/Safari */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input textarea::-ms-input-placeholder /* IE Edge */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input textarea:-ms-input-placeholder /* IE */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input textarea::-moz-placeholder /* Firefox 19+ */
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input textarea::placeholder
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}

.global_input textarea:placeholder
{
	color: var(--root_color_dark);
	font-weight: 400;
	font-style: normal;
	line-height: normal;
}