// FILTER BUTTONS CSS
.site-filters {
    margin-bottom: 20px;
	
	.product-link{
		margin-#{$dz-pos-left}: auto;
	}
	ul {
		margin: 0;
		list-style: none;
	}
	li {
		display: inline-block;
		padding:0;
		margin-bottom: 5px;
		margin-#{$dz-pos-right}: 30px;
		
		&.btn {
			box-shadow: none;
			-webkit-box-shadow: none;
			outline: none !important;
			border: 0;
		}
		input {
			display: none;
		}
		a {
			margin: 0;
			display: inline-flex;
			font-size: 15px;
			font-weight: 400;
			color: var(--bs-heading-color);
			font-family: var(--font-family-base);
			span{					
				font-size: 14px;
				color: $body-color;
				margin-#{$dz-pos-left}: 4px;
			}
		}
		&.active{
			a{
				color: var(--bs-primary);
			}
		}
		
	}
	@include respond ('tab-port'){
		ul{
			li{
				a{
					font-size: 14px;
				}
			}
		}
	}
	@include respond ('phone-land'){
		flex-direction: column;
		margin-bottom: 15px;
		ul{
			margin-bottom: 10px;	
		}
		.product-link{
			margin-#{$dz-pos-left}: 0;
			margin-#{$dz-pos-right}: auto;
		}
	}
	&.center{
		text-align: center;
		ul {
			display: inline-block;
			margin: auto;
		}
		[class*="btn"] {
			display: inline-block;
			margin: 0 5px 10px;
			text-transform: uppercase;
			@include respond('phone'){
				margin: 0 1px 5px;
				padding: 5px 10px;
				font-size: 12px;
			}
		}
	}
	//style-1
	&.style-1{
		margin-bottom: 40px;

		.filters{
			margin-bottom: 0;
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
		}
		li{
			margin: 0;
			
			.btn{
				padding: 10px 25px;
				border-radius: 60px;
				background-color: transparent;
				border: 1px solid rgba(0, 0, 0, 0.1);
				font-size: 16px;
				line-height: 1.4;
				font-weight: 400;
				color: var(--bs-secondary);
			}
			&.active{
				
				a{
					background-color: var(--bs-secondary);
					color: #fff;
				}
			}
		}
		@include respond('tab-port'){
			.filters{
				gap: 10px;
			}
			li .btn{
				padding: 8px 20px;
				font-size: 14px;
			}
		}
	}
	
	//style-2
	&.style-2{
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom:60px;
		li{
			margin: 0 !important;
			a{
				padding: 23px 15px;
				font-weight:400;
				color: #5E626F;
				text-transform: capitalize;
			}
			&.active{
				a{
					color: var(--bs-primary);
				}
			}
		}
		@include respond('phone'){
			margin-bottom:40px;
			li{
				padding:0 !important;
				a{
					margin: 0 1px 5px;
					padding: 5px 10px;
				}
			}
		}
	}

	//Style-3
	&.style-3{
		li{
			margin: 0 !important;
			a{
				background: #fff;
				color: #000;
				display: block;
				font-size: 15px;
				margin-bottom: 4px;
				padding: 15px 25px;
				width: 100%;
				border-radius: 10px;
				text-transform: capitalize;

				&:hover{
					background: #000;
					color: #fff;
				}
			}
			&.active{
				a{
					background: var(--bs-secondary);
					border-left-color: var(--bs-secondary);
					color: #fff;
				}
			}
		}
		@include respond('phone'){
			margin-bottom:40px;
			
			li{
				padding:0 !important;
				a{
					margin: 0 1px 5px;
					padding: 5px 10px;
				}
			}
		}
	}
}