un-img-lightbox[data-theme=haerer-geruestbau] button {
	--stroke-color: black;
	--stroke-width: 2px;
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: var(--stroke-color);
	text-shadow: -1px 1px 2px var(--stroke-color), 1px 1px 2px var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px -1px 0 var(--stroke-color);
	color: var(--complementary);
	padding: 0
}

un-img-lightbox[data-theme=haerer-geruestbau] button:focus-visible {
	outline: 2px solid white;
	outline-offset: 1px
}

un-img-lightbox[data-theme=haerer-geruestbau] button:active {
	color: #f5f5f5;
	-webkit-text-stroke-color: black
}

un-img-lightbox[data-theme=haerer-geruestbau] button.close::after {
	/*! content: '\2718'; */
	/*! content: '\2715'; */
	/*! content: '\2716'; */
	/*! content: 'x'; */
	content: "\d7"
}

un-img-lightbox[data-theme=haerer-geruestbau] button.close {
	font-weight: 600;
	top: 0;
	right: 3%;
	font-size: 3rem
}

un-img-lightbox[data-theme=haerer-geruestbau] button.arrows.left::after {
	content: '\2039'
}

un-img-lightbox[data-theme=haerer-geruestbau] button.arrows.right::after {
	content: '\203A'
}

un-img-lightbox[data-theme=haerer-geruestbau] button.arrows {
	font-size: 5rem;
	font-weight: 700
}

un-img-lightbox[data-theme=haerer-geruestbau] button.arrows.left {
	left: clamp(5px, 3%, 30px)
}

un-img-lightbox[data-theme=haerer-geruestbau] button.arrows.right {
	right: clamp(5px, 3%, 30px)
}

@media (hover: hover) {
	un-img-lightbox[data-theme=haerer-geruestbau] button:hover {
		scale: 1.1;
		color: color-mix(in srgb, var(--color) 70%, #000);
		-webkit-text-stroke-color: color-mix(in srgb, var(--primary) 30%, white);
		-webkit-text-stroke-width: 4px
	}
}

@media(min-width: 640px) {
	un-img-lightbox[data-theme=haerer-geruestbau] img {
		object-fit: cover;
		height: 100%
	}

	un-img-lightbox[data-theme=haerer-geruestbau] .showcase {
		width: 80%;
		height: 80%;
		position: absolute;
		left: 10%;
		top: 10%;
		z-index: 1;
		outline: thin solid var(--borders);
		outline-offset: var(--borders-offset)
	}

	un-img-lightbox[data-theme=haerer-geruestbau] button.close {
		font-size: 4rem
	}
}

@supports(color: color-mix(in oklch, white, black)) {
	un-img-lightbox[data-theme=haerer-geruestbau] button:focus-visible {
		outline: 2px solid color-mix(in srgb, var(--primary) 70%, white)
	}

	un-img-lightbox[data-theme=haerer-geruestbau] button:active {
		color: color-mix(in srgb, var(--primary) 50%, #fff);
		-webkit-text-stroke-color: color-mix(in srgb, var(--primary) 70%, black)
	}
}

un-img-lightbox {
	img {
		position: relative;
		opacity: 0;
		object-fit: cover;
		width: 100%;
		height: 100%;
		display: none
	}

	img.current {
		opacity: 1 !important;
		display: block
	}

	/*.modal {
        z-index: 3;
        left: 0;
        top: 0;
        position: absolute;
        padding-top: 100px;
        overflow: auto;
        height: 100%;
        width: 100%;
        background-color: var(--background);
        box-sizing: border-box;
        padding-bottom: 100px;
    }*/

	.modal {
		height: 80vh;
		width: 80vw;
		width: fit-content;
		max-width: 90svw;
		height: fit-content;
		/* max-height: 90svh; */
		overflow: hidden;
		background-color: var(--background);
		/* padding-top: 100px; */
		/* padding-bottom: 100px; */
		/* border-color: var(--borders); */
		/* border-style: solid; */
		border-width: 1px;
		border-radius: 5px;

		&::backdrop {
			background-color: rgba(0, 0, 0, 0.8);
		}

		outline: thin solid var(--borders);
		outline-offset: var(--borders-offset);

		img {
			width: auto;
			max-width: 100%;
			height: auto;
			max-height: 90svh;
		}

		button {
			--color: var(--primary, bisque);
			appearance: none;
			background: 0 0;
			border: 0;
			outline: 0;
			cursor: pointer;
			z-index: 1;
			color: var(--color);
			transition-property: scale, color;
			transition-duration: .1s;
			transition-timing-function: ease-in-out;
			transition-delay: 0s
		}

		button.close {
			position: absolute;
		}

		button.arrows {
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			padding: 0;
			margin: 0
		}
	}
}

un-img-lightbox.bullets {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 75%;
	position: absolute;
	bottom: 2%;
	left: 50%;
	transform: translate(-50%, -50%);
	column-gap: 2vw
}

un-img-lightbox.bullet {
	border-radius: 100%;
	border: var(--border-bullets, 1px solid #fff);
	height: var(--size-bullets, clamp(10px, .6vw, 1vw));
	width: var(--size-bullets, clamp(10px, .6vw, 1vw));
	cursor: pointer;
	/*! outline: 3px solid #5f5e5e; */
	/*! outline-offset: -5px; */
	transition: border-color .3s;
	transition: background-color .3s
}

un-img-lightbox.bullet:hover {
	border-color: var(--color-bullets-secondary, #682f2f)
}

un-img-lightbox.bullet-current {
	background-color: #682f2f
}

un-img-lightbox[data-state=closed] {
	.modal {
		opacity: 0;
		transform: scale(0);
		transition-property: transform, opacity;
		transition-timing-function: ease-in-out;
		transition-duration: .2s
	}

	.showcase {
		opacity: 0;
		transform: scale(0)
	}
}

un-img-lightbox[data-state=open] {
	.modal {
		opacity: 1;
		transform: scale(1);
		transition-timing-function: ease-in-out;
		transition-property: transform, opacity;
		transition-duration: .2s
	}

	.showcase {
		opacity: 1
	}
}

un-img-lightbox[data-arrows=false] .arrows {
	display: none !important
}

un-img-lightbox[data-transfx=flash] img {
	transition: opacity .2s linear;
	opacity: 0
}

un-img-lightbox[data-transfx=flash] img.current {
	opacity: 1 !important
}

un-img-lightbox[data-transfx=grey] img {
	filter: grayscale(100%);
	transition: filter 2s ease-in-out
}

un-img-lightbox[data-transfx=grey] img.current {
	filter: grayscale(0%) !important
}

un-img-lightbox[data-transfx=blend] img {
	filter: brightness(0%);
	transition: filter 2s ease-in-out
}

un-img-lightbox[data-transfx=blend] img.current {
	filter: brightness(100%) !important
}

un-img-lightbox[data-transfx=slide] img {
	transform: translateX(100%);
	transition-property: transform, opacity;
	transition-duration: 2s;
	transition-timing-function: ease-in-out
}

un-img-lightbox[data-transfx=slide] img.current {
	transform: translateX(0) !important
}

un-img-lightbox[data-theme=""] button.close::after {
	content: '\2718';
	content: '\2715';
	content: '\2716'
}

un-img-lightbox[data-theme=""] button.close {
	font-size: 60px;
	font-weight: 100;
	top: clamp(5px, 2%, 30px);
	right: clamp(5px, 5%, 30px)
}

un-img-lightbox[data-theme=""] button.arrows.left::after {
	content: '\2039'
}

un-img-lightbox[data-theme=""] button.arrows.right::after {
	content: '\203A'
}

un-img-lightbox[data-theme=""] button.arrows {
	font-size: 160px;
	font-weight: 700
}

un-img-lightbox[data-theme=""] button.arrows.left {
	left: clamp(5px, 5%, 30px)
}

un-img-lightbox[data-theme=""] button.arrows.right {
	right: clamp(5px, 5%, 30px)
}

un-img-lightbox[data-theme=""] button {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: color-mix(in srgb, var(--color) 50%, white)
}

un-img-lightbox[data-theme=""] button:hover {
	scale: 1.1;
	color: color-mix(in srgb, var(--color) 70%, #000);
	-webkit-text-stroke-color: color-mix(in srgb, var(--color) 30%, white)
}

un-img-lightbox[data-theme=""] button:active {
	color: color-mix(in srgb, var(--color) 50%, #fff);
	-webkit-text-stroke-color: color-mix(in srgb, var(--color) 70%, black)
}

un-img-lightbox[data-theme=""] button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--color) 70%, white);
	outline-offset: 1px
}