@mixin swiper-button-font-awesome {
	position: relative;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	background: rgba(255, 255, 255, 0.5);
	padding: 5px 10px;
	font-size: 20px;
	border-radius: 0.25rem;
	color: rgba(0, 0, 0, 0.5);
}
//button design
.swiper-button-prev::after {
	@include swiper-button-font-awesome;
	content: "\f104";
	@media (min-width: 992px) {
		padding: 15px 20px;
	}
}
.swiper-button-next::after {
	@include swiper-button-font-awesome;
	content: "\f105";
	@media (min-width: 992px) {
		padding: 15px 20px;
	}
}

//button position
.swiper-container {
	.swiper-button-next,
	.swiper-button-prev {
		position: absolute;
		top: 50%;
		z-index: 10;
	}
	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next {
		left: 10px;
		right: auto;
		@media (min-width: 992px) {
			left: 20px;
		}
	}

	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev {
		right: 10px;
		left: auto;
		@media (min-width: 992px) {
			right: 20px;
		}
	}
	&.vk_width-full {
		.swiper-button-prev,
		.swiper-container-rtl .swiper-button-next {
			@media (min-width: 992px) {
				left: 30px;
			}
		}

		.swiper-button-next,
		.swiper-container-rtl .swiper-button-prev {
			@media (min-width: 992px) {
				right: 30px;
			}
		}
	}
}

//button animation
.swiper-button-prev:hover:after {
	animation: arrow_prev 0.5s ease-out forwards;
}
@keyframes arrow_prev {
	0% {
		right: 0px;
	}
	50% {
		right: 3px;
	}
	100% {
		right: 0;
	}
}

.swiper-button-next:hover:after {
	animation: arrow_next 0.5s ease-out forwards;
}
@keyframes arrow_next {
	0% {
		left: 0px;
	}
	50% {
		left: 3px;
	}
	100% {
		left: 0;
	}
}