/* 2.9 - Carousel or Slider - Start
================================================== */

// Carousel Slick Dots - Start
.slick-dots {
	margin: 0;
	display: flex;
	position: static;
	padding-top: 40px;
	align-items: center;
	justify-content: center;
	li {
		width: auto;
		height: auto;
		margin: 0 5px;
		display: inline-block;
		&:not(:last-child) {
		}
		button {
			margin: 0;
			padding: 0;
			opacity: .3;
			width: 10px;
			height: 10px;
			display: block;
			border-radius: 100%;
			background-color: $color_primary;
			transition: $transition;
			&:before {
				display: none;
			}
		}
		&:hover,
		&.slick-active {
			button {
				opacity: 1;
			}
		}
	}
}
.slick-dotted.slick-slider {
	margin-bottom: 0;
}
// Carousel Slick Dots - End

// Carousel Arrow - Start
.carousel_arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	button {
		width: 40px;
		height: 40px;
		overflow: hidden;
		position: relative;
		color: $color_dark;
		border-radius: 100%;
		background: $color_white;
		border: 1px solid $color_border;
		&:not(:last-child) {
			margin-right: 8px;
		}
		i {
			top: 50%;
			font-size: 16px;
			margin-top: 1px;
			position: absolute;
			color: $color_dark;
			transition: $transition;
		}
		&:nth-child(1) {
			i {
				&:nth-child(1) {
					left: 50%;
					transform: translate(-50%, -50%);
				}
				&:nth-child(2) {
					left: 110%;
					transform: translateY(-50%);
				}
			}
		}
		&:nth-child(2) {
			i {
				&:nth-child(1) {
					left: 50%;
					transform: translate(-50%, -50%);
				}
				&:nth-child(2) {
					left: -110%;
					transform: translateY(-50%);
				}
			}
		}
		&:hover {
			color: $color_white;
			border-color: $color_dark;
			background-color: $color_dark;
			&:nth-child(1) {
				i {
					&:nth-child(1) {
						left: -110%;
						transform: translateY(-50%);
					}
					&:nth-child(2) {
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			&:nth-child(2) {
				i {
					&:nth-child(1) {
						left: 110%;
						transform: translateY(-50%);
					}
					&:nth-child(2) {
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			i {
				color: $color_primary;
			}
		}
	}
}

.arrow_top_right {
	position: relative;
	.carousel_arrow {
		right: 0;
		top: -61px;
		z-index: 1;
		position: absolute;
	}
}

.arrow_right_left {
	position: relative;
	.carousel_arrow {
		button {
			top: 50%;
			position: absolute;
			transform: translateY(-50%);
			&:nth-child(1) {
				left: 0;
			}
			&:nth-child(2) {
				right: 0;
			}
		}
	}
}
// Carousel Arrow - End

/* 2.9 - Carousel or Slider - End
================================================== */