@import 'lightbox/lightbox';

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

.lightboxOverlay {
	bottom: 0;
	right: 0;
}

.lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	
	
	.lb-outerContainer {
		margin: 0;
		border-radius:0;
		background-color: rgba(255, 255, 255, 0.5);
		
		.lb-container {
			overflow: hidden;
		
			.lb-image {
				image-orientation: from-image;
				border: none;
				--translate-x: 0;
				--translate-y: 0;
				--scale: 1;
				
				transform:
					translateX(var(--translate-x, 0))
					translateY(var(--translate-y, 0))
					scale(var(--scale, 1));
			}
			
			.lb-nav {
				a.lb-prev, a.lb-next {
					color: white;
					text-decoration: none;
					
					&:before {
						position: absolute;
						top: calc(50% - 1em);
					}
				}
			
				a.lb-prev {
					@include lightbox-icon(prev);
					&:before {
						left: 2em;
					}
				}
			
				a.lb-next {
					@include lightbox-icon(next);
					&:before {
						right: 2em;
					}
				}
			}
		}
	}
	
	.lb-dataContainer {
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: top;
		width: 200px;
		max-width: 100%;
		flex: 0 0 auto;
		overflow: hidden;
		
		.lb-data {
			padding: 1em 0 0 1em;
		
			.lb-details {
				float: none;
				
				.lb-caption-line {
					cursor: default;
					display: block;
					margin-top: 1em;
				}
			
				.lb-caption-line:first-child {
					margin-top: 0;
				}
				
				.lb-number {
					padding: 0;
					margin-top: 2em;
				}
			}
			.lb-closeContainer {
				display: none !important;
				margin-top: 2em;
				
				.lb-close {
					@include lightbox-icon(close);
					float: none;
				}
			}
		}
	}

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