
.owl-theme {
	// Styling Next and Prev buttons
	.owl-nav {
		margin: 0;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
		color: $nav-color;
		font-size: $nav-font-size;

		[class*='owl-'] {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			color: $nav-color;
			margin: $nav-margin;
			font-size: $nav-font-size;
			padding: $nav-padding;
			background: $nav-background;
			display: inline-block;
			cursor: pointer;
			border-radius: 0;

			i::before {
				margin: 0;
				width: auto;
			}

			&:hover {
				background: $nav-background-hover;
				color:$nav-color-hover;
				text-decoration: none;
			}
		}

		.owl-prev {
			left: 1.5rem;
		}

		.owl-next {
			right: 1.5rem;
		}

		.disabled {
			opacity: $nav-disabled-opacity;
			cursor: default;
		}
	}

	// Styling dots
	.owl-nav.disabled + .owl-dots {
		margin-top: 3.2rem;
	}

	.owl-dots {
		line-height: 1;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
		padding: 0;

		.owl-dot {
			display: inline-block;
			zoom: 1;
			*display: inline;

			span {
				position: relative;
				width: $dot-width;
				height: $dot-height;
				margin: $dot-margin;
				background: $dot-background;
				display: block;
				-webkit-backface-visibility: visible;
				transition: all .3s ease;
				border: 1px solid $dot-border;
				border-radius: $dot-rounded;
			}

			&.active,
			&:hover {
				span {
					border-color: $dot-border-active;
					background: $dot-background-active;
				}
			}
		}
	}

	&.owl-theme-light {
		.owl-dots {

			.owl-dot {
				span {
					border-color: $dot-border-light;
					background: $dot-background-light;

					&::before {
						border-color: $dot-border-light;
					}
				}

				&.active,
				&:hover {
					span {
						border-color: $dot-border-light-active;
						background: $dot-background-light-active;
					}
				}
			}
		}
	}
}