@import 'lightbox/lightbox';

@mixin lightbox-icon($icon) {
	background: none;
	font-size: 2em;
	@extend .fa;
	@extend .#{$fa-css-prefix}-#{$icon};
}

.lightbox {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: left;
	
	.lb-outerContainer {
		margin: 0;
		display: inline-block;
		
		.lb-image {
			image-orientation: from-image;
			border: none;
			border-radius: 0;
		}
		
		.lb-nav a.lb-prev, .lb-nav a.lb-next {
			color: white;
			text-decoration: none;
			
			&:before {
				position: absolute;
				top: calc(50% - 1em);
			}
		}
			
		.lb-nav a.lb-prev {
			@include lightbox-icon(prev);
			&:before {
				left: 2em;
			}
		}
		
		.lb-nav a.lb-next {
			@include lightbox-icon(next);
			&:before {
				right: 2em;
			}
		}
	}
	
	.lb-dataContainer {
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: top;
		width: 300px;
		padding: 1em;
		
		.lb-data {
			.lb-details {
				float: none;
				
				.lb-number {
					padding: 0;
					margin-top: 2em;
				}
			}
			.lb-closeContainer {
				margin-top: 2em;
				
				.lb-close {
					@include lightbox-icon(close);
					float: none;
				}
			}
		}
	}

	.lb-cancel {
		@include lightbox-icon(cancel);
		@extend .flicker;
		color: #CCC;
	}
}