spot/style/_lightbox.scss

@import 'lightbox/lightbox';

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

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

.lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;

	&.vertical {
		flex-direction: column;
		
		.lb-dataContainer {
			width: 100%;
			height: 30px;
			
			.lb-data {
				.lb-details {
					display: inline-block;
					width: calc(100% - 1.25rem);
					
					.lb-caption {
						.lb-caption-line {
							display: inline-block;
							padding-right: 1em;
							line-height: 1.33333333333em; //icon height
							overflow: hidden;

							&.comment {
								max-width: 50%;
								@include no-text-overflow();
							}
						}
					}
				}
			
				.lb-closeContainer {
					.lb-close {
						text-align: right;
					}
				}
			}
		}
	}
	&.horizontal {
		flex-direction: row;
		
		.lb-dataContainer {
			width: 200px;
			height: 100%;
			
			.lb-data {
				.lb-caption-line {
					display: block;
					margin-top: 1em;
					line-height: 1.33333333em;

					&.comment {
						.fa {
							vertical-align: text-bottom;
						}

						.comment-text {
							display: inline-block;
							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
							vertical-align: top;
						}
					}
				}

				.lb-closeContainer .lb-close {
					margin-top: calc(1em/1.33333333);
					float: none;
					text-align: center;
				}
			}
		}
	}
	
	/* Image */

	.lb-outerContainer {
		margin: 0;
		border-radius:0;
		background-color: rgba(255, 255, 255, 0.5);
		
		.lb-container {
			overflow: hidden;
		
			&.moving {
				cursor: grab;
			}

			.lb-image {
				image-orientation: from-image;
				border-radius: 0;
				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-video {
				box-sizing: content-box;
			}
			&.lb-video-nav .lb-nav {
				top: 100px;
				height: calc(100% - 200px); //Leave space for video progress bar
			}
			
			.lb-nav {

				.lb-prev-area, .lb-next-area {
					position: absolute;
					top: 0;
					height: 100%;
					width: 50%;
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
					
					&.lb-next-area {
						right: 0;
					}

					&:hover a.lb-prev, &:hover a.lb-next {
						filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
						opacity: 1;
					}
				}

				a.lb-prev, a.lb-next {
					color: white;
					text-decoration: none;
					text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
					width: 150px;
					height: 150px;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);

					-webkit-transition: opacity 0.4s;
					-moz-transition: opacity 0.4s;
					-o-transition: opacity 0.4s;
					transition: opacity 0.4s;
					
					&:before {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			
				a.lb-prev {
					@include lightbox-icon(prev);
					left: 0;
				}
			
				a.lb-next {
					@include lightbox-icon(next);
					right: 0;
				}
			}
		}
	}
	/* Titles */

	.lb-dataContainer {
		margin: 0;
		padding: 0;
		flex: 0 0 auto;
		overflow: hidden;
		
		.lb-data {
			text-align: left;
			padding: 0.5rem 0.5rem 0 0.5rem;
			
			.lb-details {
				float: none;
				
				.lb-caption-line {
					cursor: default;

					&:first-child {
						margin-top: 0;
					}
				}
			
				.lb-number {
					display: none !important;
				}
			}
			.lb-closeContainer {
				color: white;
				font-size: 1em;
				line-height: 1em;
				width: 1.25em;
				vertical-align: top;
				display: inline-block;
				
				.lb-close {
					@include lightbox-icon(close);
					@extend .fa-lg;
					width: 1.25em;
					height: auto;
					font-size: 1.3333333333em;
					line-height: 1em;
				}
			}
		}
	}

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