@import 'susy';
@import 'bourbon';
@import '../../../../themes/storefront/assets/sass/utils/variables';
@import '../../../../themes/storefront/assets/sass/utils/mixins';

// Styles for mobile
.storefront-single-product-pagination {
	a {
		display: block;
		width: 48%;

		&[rel="prev"] {
			float: left;
		}

		&[rel="next"] {
			float: right;
		}
	}
}

@media screen and (min-width: 768px) {

	// Styles for desktop
	.storefront-single-product-pagination {
		z-index: 999999;

		h2 {
			display: none;
		}

		a {
			display: block;
			width: 500px;
			position: fixed;
			float: none;
			background-color: $body-background;
			top: 50%;
			z-index: 999999;
			box-shadow: 0 0 1em rgba(0,0,0,.1);
			@include transform(translateY(-50%));
			line-height: 1.2;
			overflow: hidden;

			img {
				width: 90px;
				border-radius: 0;
			}

			.title {
				width: 340px;
			}

			&[rel="prev"] {
				left: -455px;
				border-left: 0;
				@include transition(left .3s ease-out);

				img {
					float: right;
					margin-left: 1em;
				}

				&:before {
					display: block;
					font-family: 'FontAwesome';
					content: "\f104";
					position: absolute;
					top: 50%;
					left: 1em;
					height: 1em;
					width: 1em;
					@include transform(translateY(-50%));
					line-height: 1;
					text-align: center;
				}

				&:hover {
					left: 0;
				}

				.title {
					display: block;
					position: absolute;
					right: 110px;
					top: 50%;
					@include transform(translateY(-50%));
				}
			}

			&[rel="next"] {
				right: -455px;
				border-right: 0;
				@include transition(right .3s ease-in);

				img {
					float: left;
					margin-right: 1em;
				}

				&:hover {
					right: 0;
				}

				&:after {
					display: block;
					font-family: 'FontAwesome';
					content: "\f105";
					position: absolute;
					top: 50%;
					right: 1em;
					height: 1em;
					width: 1em;
					@include transform(translateY(-50%));
					line-height: 1;
					text-align: center;
				}

				.title {
					display: block;
					position: absolute;
					left: 110px;
					top: 50%;
					@include transform(translateY(-50%));
					text-align: right;
				}
			}
		}
	}
}