/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/

.swiper-filter-active {
	.non-swiper-slide {
		display: none;
	}
}

// Start Portfolio
//--------------------------------------------------
.pxl-portfolio-grid-layout1, .pxl-portfolio-carousel1 {
	.item--featured {
		position: relative;
		overflow: hidden;
		@include border-radius(30px);
		img {
			width: 100%;
			object-fit: cover;
			@include border-radius(30px);
		}
	}
	.direction-element {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		background: -webkit-gradient(linear, left top, left bottom, from($primary_color), to($heading_color));background: -o-linear-gradient(top, $primary_color 0%, $heading_color 100%);
		background: linear-gradient(180deg, $primary_color 0%, $heading_color 100%);
		@include border-radius(30px);
	}
	.pxl-item--inner {
		&:hover {
			.direction-element {
				opacity: 0.8;
			}
		}
	}
	.item--category {
		width: fit-content;
		padding: 5px 26px;
		color: $secondary_color;
		margin-bottom: 11px;
		@include border-radius(50px);
		@include transition(all 300ms ease-in-out);
		a {
			color: inherit;
		}
	}
	.item--title {
		@extend .pxl-h3-size;
		margin-bottom: 0;
		a {
			color: inherit;
			&:hover {
				color: $primary_color;
			}
		}
	}
	&.style1 {
		.item--featured {
			margin-bottom: 30px;
		}
		.item--category {
			background-color: $heading_color;
		}
		.item--button {
			display: block;
			margin-top: 15px;
			svg {
				@include transition(all 300ms ease-in-out);
				rect {
					fill: $heading_color;
				}
				path {
					stroke: $secondary_color;
				}
			}
			&:hover {
				svg {
					@include transform(rotate(40deg));
				}
			}
		}
		.pxl-item--inner {
			&:hover {
				.item--category {
					background-color: $primary_color;
				}
			}
		}
	}
	&.style2 {
		.item--category {
			background-color: $primary_color;
		}
		.item--title {
			color: $secondary_color;
			a {
				color: inherit;
			}
		}
		.item--content {
			position: absolute;
			left: 30px;
			right: 30px;
			bottom: 40px;
			opacity: 0;
			@include transition(all 300ms ease-in-out);
			@media #{$max-sm} {
				left: 20px;
				right: 20px;
			}
		}
		.item--button {
			display: block;
			position: absolute;
			top: 30px;
			right: 30px;
			opacity: 0;
			@include transition(all 300ms ease-in-out);
			@media #{$max-sm} {
				top: 20px;
				right: 20px;
			}
			svg {
				@include transition(all 300ms ease-in-out);
				rect {
					fill: $secondary_color;
				}
				path {
					stroke: $primary_color;
				}
			}
		}
		.pxl-item--inner {
			position: relative;
			&:hover {
				.item--content, .item--button {
					opacity: 1;
				}
			}
		}
	}
}
