/**
 * global_pagination
 * @version	2.0
 * @release	25-02-2023
 * @author	msolowski Marcin Sołowski
 * @website	http://msolowski.pl
 */

.global_pagination 
{
	--global_pagination_font_family:		var(--root_font_family);
	--global_pagination_font_size:			var(--global_font_size_p);
	--global_pagination_font_weight:		700;
	--global_pagination_color:				var(--root_color_black);
	--global_pagination_background_color:	transparent;
	--global_pagination_border_color:		var(--root_color_black);
	--global_pagination_border_width:		1px;
	--global_pagination_border_radius:		0;
	--global_pagination_transition:			var(--global_transition);
	--global_pagination_line_height:		1;
	--global_pagination_margin:				12px;

	/**********************************************************************************/

	--min_global_pagination_padding_tb: 14;
	--max_global_pagination_padding_tb: 14;
	--global_pagination_padding_top_bottom:
		clamp(calc(var(--min_global_pagination_padding_tb) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_pagination_padding_tb) - var(--min_global_pagination_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_pagination_padding_tb)) * 1px)
		+ ((var(--max_global_pagination_padding_tb) - var(--min_global_pagination_padding_tb)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_pagination_padding_tb) * 1px));

	--min_global_pagination_padding_lr: 16;
	--max_global_pagination_padding_lr: 16;
	--global_pagination_padding_left_right:
		clamp(calc(var(--min_global_pagination_padding_lr) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_global_pagination_padding_lr) - var(--min_global_pagination_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_global_pagination_padding_lr)) * 1px)
		+ ((var(--max_global_pagination_padding_lr) - var(--min_global_pagination_padding_lr)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_global_pagination_padding_lr) * 1px));

	/**********************************************************************************/

	font-family: var(--global_pagination_font_family);
	font-size: var(--global_pagination_font_size);
	font-weight: var(--global_pagination_font_weight);
	display: flex;
	align-items: center;
	justify-content: center;
}

.global_pagination a
{
	color: var(--global_pagination_color); /* dziedzicza po tym wszystkie a nizszych poziomow */
}

.global_pagination a,
.global_pagination span
{
	display: inline-flex;
}

.global_pagination ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin-right: calc((var(--global_pagination_margin) * 0.5) * -1);
	margin-left: calc((var(--global_pagination_margin) * 0.5) * -1);
}

.global_pagination ul li
{
/*	position: relative; */
/*	border-right: 1px solid transparent; */ /* potrzebne gdy musza wystapic odstepy miedzy elementami li w postaci kresek pionowych */
	margin-top: calc(var(--global_pagination_margin) * 0.5);
	margin-right: calc(var(--global_pagination_margin) * 0.5);
	margin-bottom: calc(var(--global_pagination_margin) * 0.5);
	margin-left: calc(var(--global_pagination_margin) * 0.5);
	transition: var(--global_transition);
	display: flex;
	align-items: center;
}

/* .global_pagination ul li:first-child
{
	margin-left: 0;
}

.global_pagination ul li:last-child
{
	margin-right: 0;
} */

.global_pagination ul li::before /* potrzebne gdy musza wystapic odstepy miedzy elementami li w postaci kresek pionowych */
{
/*	content: '';
	display: block;
	position: absolute;
	height: 50%;
	top: 25%;
	left: 100%;
	width: 1px;
	background-color: var(--root_color_dark); */
}

.global_pagination ul li:last-of-type::before
{
/*	width: 0; */
}

.global_pagination ul li:hover
{
/*	background-color: var(--global_color_element_hover); */
}

.global_pagination ul li a
{
	padding-top: var(--global_pagination_padding_top_bottom);
	padding-right: var(--global_pagination_padding_left_right);
	padding-bottom: var(--global_pagination_padding_top_bottom);
	padding-left: var(--global_pagination_padding_left_right);
	position: relative;
	border-radius: var(--global_pagination_border_radius);
	align-items: center;
	justify-content: center;
	border: 1px solid var(--root_color_light_grey);
}

.global_pagination ul li a::after
{
/*	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--root_color_dark);
	opacity: 0;
	transition: var(--global_transition); */
}

.global_pagination ul li a.prev,
.global_pagination ul li a.next
{
	color: var(--root_color_white);
	border-color: var(--root_color_dark);
	background-color: var(--root_color_dark);
}

.global_pagination ul li a.prev::before
{
	font-family: 'msolowski';
	content: '\e901';
	display: block;
	font-weight: 400;
	line-height: 1;
	color: var(--root_color_white);
	transition: var(--global_transition);
}

.global_pagination ul li a.next::after
{
	font-family: 'msolowski';
	content: '\e902';
	display: block;
	font-weight: 400;
	line-height: 1;
	color: var(--root_color_white);
	transition: var(--global_transition);
}

.global_pagination ul li a:hover
{
	color: var(--root_color_lead);
	border-color: var(--root_color_lead);
}

.global_pagination ul li a:active
{
/*	transform: scale(0.95, 0.95); */
}

.global_pagination ul li a.prev:hover::before
{
/*	transform: translateX(-5px); */
/*	color: var(--root_color_black); */
}

.global_pagination ul li a.next:hover::after
{
/*	transform: translateX(5px); */
/*	color: var(--root_color_black); */
}

.global_pagination ul li a.prev:hover,
.global_pagination ul li a.next:hover
{
	color: var(--root_color_white);
	border-color: var(--root_color_lead);
	background-color: var(--root_color_lead);
}

.global_pagination ul li a.prev:active,
.global_pagination ul li a.next:active
{
/*	transform: scale(0.95, 0.95); */
}

.global_pagination ul li a.prev span,
.global_pagination ul li a.next span
{
	text-transform: uppercase;
}

.global_pagination ul li span.current,
.global_pagination ul li span.dots
{
	cursor: default;
	padding-top: var(--global_pagination_padding_top_bottom);
	padding-right: var(--global_pagination_padding_left_right);
	padding-bottom: var(--global_pagination_padding_top_bottom);
	padding-left: var(--global_pagination_padding_left_right);
}

.global_pagination ul li span.current
{
	border-radius: var(--global_pagination_border_radius);
	align-items: center;
	justify-content: center;
	color: var(--root_color_lead);
	border: 1px solid var(--root_color_lead);
}