/* PAGE: PORTFOLIO
-------------------------------------------- */

.vp-portfolio[data-vp-layout=slider] {
	--vp-layout-slider--arrows__width: auto;
	--vp-layout-slider--arrows__height: auto;
	--vp-layout-slider--arrows__offset: #{px2rem(40px)};
	--vp-layout-slider--arrows__compensation: calc(var(--swiper-navigation-size) / 2);
	--vp-layout-slider--arrows__color: #17161A;
	--vp-layout-slider--arrows__background-color: transparent;
	--vp-layout-slider--arrows__border-radius: 0;
	--vp-layout-slider--arrows__box-shadow: none;
	--vp-layout-slider--bullets__width: #{px2rem(8px)};
	--vp-layout-slider--bullets__height: #{px2rem(8px)};
	--vp-layout-slider--bullets__gap: #{px2rem(8px)};
	--vp-layout-slider--bullets__background-color: var(--vlt-color-gray-middle);
	--vp-layout-slider--bullets__opacity: 1;
	--vp-layout-slider--bullets-hover__opacity: .8;

	.vp-portfolio__items-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--swiper-navigation-size);
		height: var(--swiper-navigation-size);
		overflow: hidden;
		font-size: px2rem(13px);
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-white);
		border-radius: 50%;
		outline: none;
		box-shadow: var(--vlt-box-shadow);

		svg {
			height: 1em;
		}

		&:hover {
			color: var(--vlt-accent-1);
			background-color: var(--vlt-color-white);
		}

		&-prev:hover svg {
			animation: vlt_animate_icon_left var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
		}

		&-next:hover svg {
			animation: vlt_animate_icon_right var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;;
		}

	}

	.vp-portfolio__items-bullets {
		line-height: 0;

		> .swiper-pagination-bullet {
			outline: none;
			transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

			&.swiper-pagination-bullet-active {
				background-color: var(--vlt-accent-1);
			}

		}

	}

}

.vlt-page-content .vp-portfolio {
	--vp-elements__gap: 0;
}

.vp-portfolio__item .vlt-badge {
	position: absolute;
	right: 0;
	z-index: 10;
}

[data-vp-slider-slides-per-view="auto"] .swiper-slide {
	width: auto;
}

.vp-portfolio__item-tilt {

	.vp-portfolio__item-meta-wrap {
		transition: transform 200ms linear;
	}

}

// import
@import "portfolio/pagination";
@import "portfolio/filters";
@import "portfolio/styles/default";
@import "portfolio/styles/fly";
@import "portfolio/styles/emerge";
@import "portfolio/styles/fade";
@import "portfolio/work/instagram";
@import "portfolio/work/style-1";
@import "portfolio/work/style-2";