/* Carousel
----------------------------------------------------------*/

.carousel {
	position: relative;

	.owl-item {
		overflow: hidden;
	}

	&:hover {
		.owl-buttons {
			@include opacity(1);
			@include scaleX(1);
			visibility: visible;
		}
	}
}

html[dir="rtl"] .carousel {
	direction: ltr;
}

.owl-pagination {
	text-align: center;

	.owl-page {
		display: inline-block;
		margin: 0px 8px;

		span {
			display: inline-block;
			width: 11px;
			height: 11px;
			@include border-radius(50%);
			@include transition(0.2s all ease-out);
			background-color: $color-black;
			@include opacity(0.2);
		}

		&.active {
			span { @include opacity(0.6); }
		}
	}
}

.dark .owl-pagination {
	.owl-page {
		span {
			background-color: rgba($color-white,0.4);
		}
		&.active {
			span { background-color: rgba($color-white,0.75); }
		}
	}
}

.owl-buttons {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 100%;
	@include opacity(0);
	@include scaleX(0.9);
	visibility: hidden;
	@include transition(0.2s all ease-out);
	> * {
		& {
			@include opacity(0.5);
			@include transition(0.2s all ease-out);

			&:hover, &:focus {
				@include opacity(1);
			}
		}
		&:after, &:before {
			position: absolute;
			top: 0;
			font-size: 26px;
			font-family:themify;
		}
	}
	.owl-prev:before {
		left: -20px;
		content:"\e64a";
	}
	.owl-next:before {
		right: -20px;
		content:"\e649";
	}
}

.inner-controls {
	> .owl-controls > .owl-pagination {
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;

		.owl-page span {
			background-color: $color-white;
		}
	}
	.owl-buttons {
		> * {
			&:after, &:before {
				color: $color-white;
			}
		}
		.owl-prev:before {
			left: 20px;
		}
		.owl-next:before {
			right: 20px;
		}
	}
}