@import "../bootstrap/scss/_functions";
@import "../base/_functions";
@import "../base/_variables";
@import "../bootstrap/scss/_variables";
@import "../bootstrap/scss/_mixins";


// Variables
$owl-base: $gray-900;
$owl-primary: $primary;


// Core styles (editing is not recommended)
.owl-carousel {
	display: none;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	/* position relative and z-index fix webkit rendering fonts issue */
	position: relative;
	z-index: 1;

	.owl-stage {
		position: relative;
		-ms-touch-action: pan-Y;
		touch-action: manipulation;
		-moz-backface-visibility: hidden; /* fix firefox animation glitch */
	}

	.owl-stage:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

	.owl-stage-outer {
		position: relative;
		overflow: hidden;
		/* fix for flashing background */
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}

	.owl-wrapper,
	.owl-item {
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
	}

	.owl-item {
		position: relative;
		min-height: 1px;
		float: left;
		backface-visibility: hidden;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}
	.owl-item {
		display: block;
		width: 100%;
	}

	.owl-nav,
	.owl-dots {
		-webkit-tap-highlight-color: transparent;

		&.disabled {
			display: none;
		}
	}

	.owl-prev,
	.owl-next,
	.owl-dot {
		cursor: pointer;
		user-select: none;
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
	}

	&.owl-loaded {
		display: block;
	}

	&.owl-loading {
		opacity: 0;
		display: block;
	}

	&.owl-hidden {
		opacity: 0;
	}

	&.owl-refresh .owl-item {
		visibility: hidden;
	}

	&.owl-drag .owl-item {
		touch-action: pan-y;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	&.owl-grab {
		cursor: grab;
	}

	&.owl-rtl {
		direction: rtl;
	}

	&.owl-rtl .owl-item {
		float: right;
	}
}

// Theme styles
.owl-carousel {
	// Next and Prev buttons
	.owl-nav {
		margin-top: px-to-rem( 40px );
		pointer-events: none;
	}

	.owl-prev,
	.owl-next {
		display: inline-flex;
		padding: 5px;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
		pointer-events: auto;
		color: $owl-base;

		&::before,
		&::after {
			display: block;
			font-family: 'Intense Icons';
		}

		&:hover {
			color: $owl-primary;
		}

		&.disabled {
			color: $owl-base;
			opacity: .3;
			cursor: default;
		}
	}

	.owl-prev {
		margin-right: 10px;
		&::before {
			content: '\e908';
		}
	}

	.owl-next {
		margin-left: 10px;
		&::before {
			content: '\e909';
		}
	}

	// Dots
	.owl-dots {
		margin-top: px-to-rem( 40px );
		font-size: 0;
		line-height: 0;
	}

	.owl-dot {
		position: relative;
		display: inline-block;
		text-align: center;
		width: 24px;
		height: 12px;
		margin: 0 4px;
		zoom: 1;

		span {
			display: inline-block;
			width: 12px;
			height: inherit;
			border-radius: 8px;
			background: $gray-400;
			transition: all .3s ease;
		}

		&:hover {
			span {
				background: $owl-primary;
			}
		}

		&.active {
			span {
				width: inherit;
				background: $owl-primary;
			}
		}
	}
}


// Spacing
* + .owl-carousel {
	margin-top: px-to-rem( 40px );
}

.divider + .owl-carousel {
	margin-top: px-to-rem( 75px );
}


// Modifying
.owl-style-1 {
	.owl-stage-outer {
		margin: -50px -30px;
		padding: 50px 30px;
	}

	.owl-item:not( .active ) {
		> *,
		> * > * {
			box-shadow: none;
		}
	}
}


.owl-style-2 {
	.owl-stage-outer {
		margin: -30px;
		padding: 30px;
	}
}


.owl-style-3 {
	.owl-stage-outer {
		overflow: visible;
	}
}


.owl-style-4 {
	.owl-stage {
		display: flex;
		align-items: center;
	}

	.owl-item {
		flex-shrink: 0;
	}
}


// Owl remote nav
.owl-remote-nav {
	.owl-prev,
	.owl-next {
		display: inline-flex;
		padding: 5px;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
		color: $owl-base;

		&::before,
		&::after {
			display: block;
			font-family: 'Intense Icons';
		}

		&:hover {
			color: $owl-primary;
		}

		&.disabled {
			color: $owl-base;
			opacity: .3;
			cursor: default;
		}
	}

	.owl-prev {
		margin-right: 10px;
		&::before {
			content: '\e908';
		}
	}

	.owl-next {
		margin-left: 10px;
		&::before {
			content: '\e909';
		}
	}
}


// Contexts
.context-dark {
	.owl-carousel {
		.owl-dot {
			span {
				background: rgba( $white, .3 );
			}

			&:hover {
				span {
					background: $white;
				}
			}

			&.active {
				span {
					width: inherit;
					background: $white;
				}
			}
		}
	}
}


// Media
@include media-breakpoint-up(md) {
	* + .owl-carousel {
		margin-top: px-to-rem( 50px );
	}

	h1 + .owl-carousel {
		margin-top: px-to-rem( 70px );
	}
}

@include media-breakpoint-up(lg) {
	.owl-carousel {
		.owl-nav,
		.owl-dots {
			margin-top: px-to-rem( 60px );
		}
	}
}

@include media-breakpoint-up(xxl) {
	* + .owl-carousel {
		margin-top: px-to-rem( 70px );
	}

	h1 + .owl-carousel {
		margin-top: px-to-rem( 100px );
	}
}

// Layout
@import "owl-carousel-separate";