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

.global_button
{
	--global_button_font_family:		var(--root_font_family);
	--global_button_font_size:			var(--global_font_size_p);
	--global_button_font_weight:		700;
	--global_button_color:				var(--root_color_black);
	--global_button_background_color:	transparent;
	--global_button_border_color:		var(--root_color_lead);
	--global_button_border_width:		2px;
	--global_button_border_radius:		70px;
	--global_button_transition:			var(--global_transition);
	--global_button_line_height:		1;

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

	--min_global_button_padding_tb: 16;
	--max_global_button_padding_tb: 20;
	--global_button_padding_top_bottom:
		clamp(calc(var(--min_global_button_padding_tb) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_button_padding_tb) - var(--min_global_button_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_button_padding_tb)) * 1px)
		+ ((var(--max_global_button_padding_tb) - var(--min_global_button_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_button_padding_tb) * 1px));

	--min_global_button_padding_lr: 24;
	--max_global_button_padding_lr: 32;
	--global_button_padding_left_right:
		clamp(calc(var(--min_global_button_padding_lr) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_button_padding_lr) - var(--min_global_button_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_button_padding_lr)) * 1px)
		+ ((var(--max_global_button_padding_lr) - var(--min_global_button_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_button_padding_lr) * 1px));

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

	--global_button_color_h:			var(--root_color_black);
	--global_button_background_color_h:	var(--root_color_lead);
	--global_button_border_color_h:		var(--root_color_lead);

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

	font-family: var(--global_button_font_family);
	font-size: var(--global_button_font_size);
	font-weight: var(--global_button_font_weight);
	color: var(--global_button_color);
	padding-top: var(--global_button_padding_top_bottom);
	padding-right: var(--global_button_padding_left_right);
	padding-bottom: var(--global_button_padding_top_bottom);
	padding-left: var(--global_button_padding_left_right);
	border-color: var(--global_button_border_color);
	border-width: var(--global_button_border_width);
	border-style: solid;
	border-radius: var(--global_button_border_radius);
	background-color: var(--global_button_background_color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
/*	white-space: nowrap; */
	line-height: var(--global_button_line_height);
	position: relative;
	overflow: hidden;
	transition: var(--global_button_transition);
	letter-spacing: normal;
	text-align: center;
	outline-color: transparent;
	outline-width: 4px;
	outline-style: solid;
	outline-offset: calc(var(--global_button_border_width) * -1);
}

.global_button:hover
{
/*	border-color: var(--global_button_border_color_h);
	background-color: var(--global_button_background_color_h); */
	color: var(--global_button_color_h);
	outline-color: var(--global_button_border_color_h);
/*	transform: translateY(-5px); */
}

.global_button:active
{
/*	transform: translateY(-5px) scale(0.95, 0.95); */
	transform: scale(0.95, 0.95);
}

.global_button span
{
	position: relative;
	z-index: 1;
}

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

.global_button.gb_after::after
{
	font-family: 'msolowski';
	content: '\e902';
/*	font-weight: 400; */
	display: block;
	margin-left: 12px;
/*	font-size: 12px; */
	transition: var(--global_transition);
	pointer-events: none;
}

.global_button.gb_after:hover::after
{
	transform: translateX(5px);
}

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

.global_button.gb_small
{
	--global_button_padding_top_bottom: 12px;
	--global_button_padding_left_right: var(--global_size_20);
	font-size: var(--global_font_size_p_small);
	font-weight: 400;
}

.global_button.gb_background
{
	--global_button_border_color: transparent;
	--global_button_color: var(--root_color_black);
	--global_button_background_color: var(--root_color_lead_2);
	border-width: 0;
	outline-width: 0;
}

.global_button.gb_background::after
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	background-color: #8dff8d;
	border-radius: 50%;
	aspect-ratio: 1/1;
	transform: translateY(100%);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.global_button.gb_background:hover
{
/*	--global_button_border_color_h: transparent; */
	color: var(--root_color_black);
/*	--global_button_background_color: var(--root_color_lead); */
}

.global_button.gb_background:hover::after
{
	transform: translateY(0px);
}

.global_button.gb_bc_white
{
	--global_button_color: var(--root_color_black) !important;
	--global_button_background_color: var(--root_color_light) !important;
}

.global_button.gb_bc_white:hover
{
	--global_button_color_h: var(--root_color_black) !important;
	--global_button_background_color_h: var(--root_color_lead) !important;
}

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

@media screen and (max-width: 1680px)
{
}

@media screen and (max-width: 1600px)
{
}

@media screen and (max-width: 1440px)
{
}

@media screen and (max-width: 1366px)
{
}

@media screen and (max-width: 1300px)
{
}

@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
	.global_button
	{
		--global_button_font_size:		var(--global_font_size_p_small);
		--global_button_font_weight:	400;
	}
}

@media screen and (max-width: 800px)
{
}

@media screen and (max-width: 640px)
{
}

@media screen and (max-width: 480px)
{
/*	.global_button.gb_w_100_mobile
	{
		width: 100%;
	} */
}

@media screen and (max-width: 360px)
{
}