@btnMenu: 40px;
@zIndexLightbox: 200;

.lightbox {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: @zIndexLightbox;

	&__item {
		cursor: pointer;
	}

	&__close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: @btnMenu;
		height: @btnMenu;
		background: none;
		cursor: pointer;

		span {
			position: absolute;
			top: 50%;
			left: @btnMenuMobileMargin;
			margin-top: -1px;
			font-size: 0;

			&,
			&:before,
			&:after {
				content: '';
				display: block;
				width: calc(@btnMenu - calc(@btnMenuMobileMargin * 2));
				height: 1px;
				background: none;
			}

			&:before,
			&:after {
				position: absolute;
				top: 50%;
				left: 0;
				margin: 0;
				transform-origin: center center;
				background: @colorBackground;
			}
			&:before {
				transform: rotate(-45deg);
			}
			&:after {
				transform: rotate(45deg);
			}
		}
	}

	&__img {
		width: auto;
		height: auto;
		max-width: 90%;
		max-height: 90%;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
	}
}