@import 'lightbox/lightbox';

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

.lightbox {
	.lb-cancel {
		@include lightbox-icon(cancel);
		@extend .flicker;
		color: #CCC;
	}
	
	.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-data .lb-close {
		@include lightbox-icon(close);
	}
	
	.lb-image {
		image-orientation: from-image;
	}
}