$scaleRatio: .15 !default;
@if $box-ratio > 1 {
	$scaleRatio: .4;
}

.netflix-slider-wrapper {
	padding: $track-padding-large 0;
  overflow: hidden;
  position: relative;
	margin-top: -$track-padding-large;
	margin-bottom: -$track-padding-large;

	&.hovered {
		z-index: 500;
	}

	.netflix-slider {
		padding: 0 #{$track-padding-small - $box-padding};
		display: flex;
		transition: transform 300ms ease;

		.netflix-box {
			//flex: 0 0 19.7%;
			padding: 0 $box-padding;

			font-size: #{1rem / (1 + $scaleRatio)};

			.product-thumb {
				transform: scale(1);
				transition: transform 300ms ease;
			}

			&.first .product-thumb {
				transform-origin: 0% 50%;
			}

			&.last .product-thumb {
				transform-origin: 100% 50%;
			}

			&.load-more {
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}
		}

		&.hovered {

			&.first-hovered:hover .netflix-box:not(:hover) .product-thumb {
				transform: translateX(0);
			}

			&:hover .netflix-box:not(:hover) .product-thumb {
				transform: translateX(#{-100% * $scaleRatio / 2});
			}

			&.last-hovered:hover .netflix-box:not(:hover) .product-thumb {
				transform: translateX(#{-100% * $scaleRatio});
			}

			.netflix-box {
				&:hover ~ .netflix-box .product-thumb {
					transform: translateX(#{100% * $scaleRatio / 2});
				}

				&:hover .product-thumb {
					transform: scale(#{1 + $scaleRatio});
					z-index: 600;
				}

				&.first {
					&:hover ~ .netflix-box .product-thumb {
						transform: translateX(#{100% * $scaleRatio});
					}
				}

				&.last {
					&:hover ~ .netflix-box .product-thumb {
						transform: none;
					}
				}
			}
		}
	}

	.slide-button {
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba($background-color, .8);
		width: $track-padding-small;
		color: transparent;
		border: 0;
		outline: 0;
		padding: 0;
		z-index: 4;

		span {
			width: 25px;
			color: $text-color;
			display: block;
			margin: 0 auto;
		}

		i {
			font-size: 2em;
			font-weight: bold;
			transition: font-size 300ms ease-out;
		}

		&:hover {
			i {
				font-size: 3em;
			}
		}

		&--next {
			right: 0;
		}

		&--prev {
			left: 0;
		}
	}

	@media #{$medium-and-up} {
		.netflix-slider {
			padding: 0 #{$track-padding-medium - $box-padding};
		}

		.slide-button {
			color: $text-color;
			width: $track-padding-medium;
		}
	}

	@media #{$large-and-up} {
		.netflix-slider {
			padding: 0 #{$track-padding-large - $box-padding};
		}

		.slide-button {
			width: $track-padding-large;
		}
	}
}