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

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

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

	&-inner {
		&:before {
			@include content-centered;
		}

		&--left {
			left: 0;

			&.v1 {
				left: -5px;
			}

			&.v4 {
				left: 25px;
			}
		}

		&--right {
			right: 0;

			&.v1 {
				right: -5px;
			}

			&.v4 {
				right: 25px;
			}
		}
	}

	&--v1 {
		color: $pagination-v1-arrow;
		background-color: $white;
	}

	&--v2 {
		color: $pagination-v2-arrow;
		background-color: #ebf0f7;

	}

	&--v3 {
		color: $dark;
		background-color: transparent;
		font-size: 20px;
		font-weight: 800;
		color: $gray-9;

		&:hover {
			color: $dark;
			background-color: transparent;
		}

	}

	&--v4 {
		background-color: transparent;
		color: $white;
		font-size: 20px;

		&:hover {
			background-color: transparent;
		}
	}
}