/*------------------------------------
  Slick Arrows
------------------------------------*/

.u-slick__arrow {
	z-index: 1;
	line-height: 0;
	display: inline-block;
	color: $slick-arrow-color;
	background-color: $slick-arrow-bg-color;
	width: $slick-arrow-width;
	height: $slick-arrow-width;
	font-size: $slick-arrow-font-size;
	cursor: pointer;
	transition: $slick-arrow-transition;
	border: 1px solid $slick-border-color;

	&:hover {
		color: $slick-arrow-hover-color;
		background-color: $slick-arrow-hover-bg-color;
		border-color: $slick-arrow-hover-bg-color;
	}

	&-inner {

		&:before {
			@include content-centered;
		}

		&--left {
			left: 0;
    
		}

		&--right {
			right: 0;
		   
		}


	}

	&--v1 {
		border: 0;
		&:hover {
		color: $white;
		background-color: $gray-950;
		}
	}

	&--v2 {
	 color: $gray-360;
	}

	&--v3 {
		&:hover {
			color: $white !important;
			border: 0;
		}
	}

	&--v4 {
		background-color: transparent;
		border: 0;
		&:hover {
			border: 0;
			background-color: transparent;
		}
	}

	&--v5 {
		background-color: $tangerine-light;
		border: $tangerine-light;
		color: $dark;

		&:hover {
			background-color: $tangerine;
			border: $tangerine;
			color: $white;
		}
	}
}

/* Flat */
.u-slick__arrow--flat {
	color: $slick-arrow-flat-color;
	background-color: $slick-arrow-flat-bg-color;
}

/* Flat White */
.u-slick__arrow--flat-white {
	color: $slick-arrow-flat-white-color;
	background-color: $slick-arrow-flat-white-bg-color;

	&:hover {
		color: $slick-arrow-flat-white-hover-color;
		background-color: $slick-arrow-flat-white-bg-hover-color;
	}
}

/* Border White */
.u-slick__arrow--border {
	background-color: $slick-arrow-border-bg-color;
	border: 1px solid $white;
	color: $slick-arrow-border-white-color;

	&:hover {
		color: $slick-arrow-flat-white-hover-color;
		background-color: $slick-arrow-border-white-bg-hover-color;
	}
}

/* Offset */
.u-slick__arrow--offset {
	@include media-breakpoint-up(lg) {
		&.u-slick__arrow-inner {
			&--left {
				left: -2.5rem;
			}

			&--right {
				right: -2.5rem;
			}
		}
	}
}

/* Vertical Center Alignment */
.u-slick__arrow-centered--y {
	@include content-centered(false, true);
}

.arrow-cursor {
	cursor: pointer;
}
