

.full-width-wrap .dt-shortcode .filter {
	width: @content-width;
	margin-left: auto;
	margin-right: auto;
}
@filter-border-radius: 100px;
@filter-decoration-line-size: 2px;
/* #FILTER & Pagination
================================================== */
//Gap below categorization & before pagination
.filter {
	margin-bottom: @navigation-margin;
}
.paginator {
	margin-top: @navigation-margin;
}

	/*Theme Options -> Categorization, sorting & pagination style -> Font size*/
	.filter-categories {
		& a,
		& .customSelect {
			font: @filter-font-style @filter-font-variant @filter-font-weight @filter-font-size~"/"@filter-font-size + 4 @filter-font-family;
			text-transform: @filter-text-transform;
		}
	}
	.filter a,
	.filter a *,
	.filter .customSelect {
		.header-color;
	}
	.filter svg {
		fill: var(--the7-h5-color);
		color: var(--the7-h5-color);
	}
	.filter-categories a,
	.filter-extras > div {
		padding: @filter-item-padding-top @filter-item-padding-right @filter-item-padding-bottom @filter-item-padding-left;
		margin: @filter-item-margin-top @filter-item-margin-right @filter-item-margin-bottom @filter-item-margin-left;
	}
	
	.filter-categories a {
		.filter:not(.filter-bg-decoration):not(.filter-underline-decoration) & {
			&:hover,
			&.act {
				color: var(--the7-accent-color);
			}
			&:hover,
			&.act {
				.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
			}
		}
		.filter-bg-decoration & {
			&:not(.act):hover {
				color: var(--the7-accent-color);
			}
			&:after {
				display: none;
			}
			&:not(.act):hover {
				.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
			}
			&.act {
				color: #fff;
			}
			.border-radius(@filter-border-radius);
			&.act {
				.accent-bg-mixin;
				.border-radius(@filter-border-radius);
			}
		}
		.filter-underline-decoration & {
			&:after {
				.accent-bg-mixin;
				height: @filter-decoration-line-size;
			}
		}
	}
/*Sorting*/
.filter-switch {
	background-color: fade(@accent-bg-color, 20%);
	.background-gradient(  @startColor: fade(@accent-bg-color,20% ), @endColor: @accent-bg-filter-switch );
	
}

.filter:not(.filter-bg-decoration) .filter-categories a.act:after,
.filter-switch-toggle {
	background-color: var(--the7-accent-color);
	.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
}
/* #PAGINATOR
================================================== */

/*pagination style -> color*/
.paginator a,
.paginator a * {
	.header-color;
}
.paginator .button-caption:before {
	background: var(--the7-title-color);
}
/*!-Load more*/

.paginator .button-load-more,
.paginator .loading-ready {
	.text-normal;
}
.paginator .button-load-more {
	border-color: fade(@h5-color, 10%);
	&.animate-load,
	&:hover {
		border-color: fade(@h5-color, 21%);
	}
    .text-normal;
	&.animate-load,
	&.button-lazy-loading {
		& .stick {
			border-top-color: var(--the7-h5-color);
			border-right-color: var(--the7-h5-color);
		}
	}
}

/*Load more:end*/
//Pagination

.paginator:not(.paginator-more-button) a {
	.text-big;
	.header-color;
	&:after {
		background-color: var(--the7-accent-color);
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
	}
}
