lostplaces-frontend/components/03_Organisms/imageGrid/_imageGrid.scss

@use "sass:math";

.LP-ImageGrid{
	&__Container {
		list-style-type: none;
		@include RV-Grid;
		--itemWidth: 290px;
		--itemHeight: 200px;
		grid-template-rows: repeat(auto-fit, var(--itemHeight));
		gap: $-spacing-small;
	}

    &__Item {
		position: relative;
		//@include RV-ContentCrop;
		height: var(--itemHeight);

		.LP-Image {
			height: 100%;
			height: 100%;
		}

		&--add {
			.LP-Link {
				width: 100%;
				height: 100%;
				position: relative;	
				display: block;
				background: $-almost-white;
				transition: background .3s;

				.LP-Icon {
					width: $-spacing-large;
					height: $-spacing-large;

					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			&:hover .LP-Link{
				background-color: $-beige;
			}
		}
	}

	&__DeleteItem {
		opacity: 0.7;
		visibility: hidden;
		position: absolute;
		top: $-spacing-small;
		right: $-spacing-small;
		background-color: transparent;
		border-radius: 50%;
		transition: background .2s;

		height: $-spacing-large;
		width: $-spacing-large;

		.LP-Link .LP-Icon{
			height: #{$-spacing-small * 2};
			width: #{$-spacing-small * 2};
			position:relative;
			left: #{math.div(($-spacing-large - $-spacing-small), 3.2)};
			top: #{math.div(($-spacing-large - $-spacing-small), 3.2)};
		}
	}
	
	&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover { 
		background-color: $-light-brown;
		visibility: visible;
	}
	
	&__LightBox {
		visibility: hidden;
		display: none;
		position: fixed;
		pointer-events: none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: rgba($-grey, .9);
		padding: 2rem;
		padding-bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 30;
		top: 0;
		left: 0;
		box-sizing: border-box;
		
		img {
			object-fit: contain;
		}

		&:target {
			visibility: visible;
			display: grid;
			grid-template-areas: 'picture picture' 'previous next';
			grid-template-rows: 1fr 4rem;
			grid-template-columns: 1fr 1fr;
			pointer-events: initial;
		}
	}
	
	&__FullSizeImage {
		grid-area: picture;
	}
	
	&__Previous{
		grid-area: previous;
		align-self: center;
		justify-self: end;
	}
	
	&__Next {
		grid-area: next;
		align-self: center;
		justify-self: start;
	}
	
	&__Previous, &__Next {
		padding: 25px;
		color: $-beige;
		text-decoration: none;
		font-family: $-primary-sans-serif-font;
		font-weight: bold;
		font-size: 20px;
	}
	
	&__Close{
		position: fixed;
		right: 1rem;
		top: 1rem;
		left: unset;
		visibility: visible;
		opacity: 1;
	}
}

.LP-Select {
	display: block;
	cursor: pointer; 
	transition: box-shadow .3s;
}

.LP-Select:checked, :checked + .LP-Select, .LP-Select--active {
	box-shadow: 0 0 3px 3px #C09F80; 
}