/* ====================

Table of Contents

1. Grid shadow canvas layer
2. Lightbox window
3. Lightbox content wrapper
4. Lightbox image
5. Lightbox caption
6. Lightbox preloader canvas
7. Ligtbox close button
8. Ligtbox navigation buttons
9. Lightbox background canvas

==================== */



/* 1. Grid shadow canvas layer */

.diamond-grid-shadow-layer {
	pointer-events: none;
}



/* 2. Lightbox window */

.diamond-grid-lightbox {
  	position: fixed;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	overflow: hidden;
}

.diamond-grid-lightbox-inner-window {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 20px;
}



/* 3. Lightbox content wrapper */

.diamond-grid-lightbox-content-wrapper {
	position: absolute;
	z-index: 3;
	will-change: transform;
}

.diamond-grid-lightbox-content {
	display: flex;
	align-items: center;
	overflow: hidden;
}



/* 4. Lightbox image */

.diamond-grid-lightbox-content > img {
	display: block;
	position: relative;
	z-index: 2;
	margin: 0 auto;
	pointer-events: none;
}



/* 5. Lightbox caption */

.diamond-grid-lightbox-caption {
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	word-break: break-word;
	overflow: auto;
}



/* 6. Lightbox preloader canvas */

.diamond-grid-lightbox-preloader {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	user-select: none;
}



/* 7. Ligtbox close button */

.diamond-grid-lightbox-close-button {
	display: block;
	position: absolute;
	z-index: 2;
	transform: scale(1);
	will-change: transform;
	cursor: pointer;
}

.diamond-grid-lightbox-close-button img,
.diamond-grid-lightbox-close-button svg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}



/* 6. Ligtbox navigation buttons */

.diamond-grid-lightbox-navigation-button {
	display: block;
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translate3d(0,-50%,0);
	will-change: transform;
	cursor: pointer;
}

.diamond-grid-lightbox-navigation-button img,
.diamond-grid-lightbox-navigation-button svg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}



/* 9. Lightbox background canvas */

.diamond-grid-lightbox-background {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	user-select: none;
}