.bake-lightbox {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: var(--bw-spacing-16, 1.6rem);
	border: 0;
	background: transparent;
	color: var(--bw-surface-0, #fff);
}

.bake-lightbox::backdrop {
	background: color-mix(in srgb, var(--bw-color-base-900, #212529) 82%, transparent);
}

.bake-lightbox__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
}

.bake-lightbox__close {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
}

.bake-lightbox__prev {
	position: absolute;
	z-index: 2;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.bake-lightbox__next {
	position: absolute;
	z-index: 2;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.bake-lightbox__figure {
	margin: 0;
	min-inline-size: 0;
}

.bake-lightbox img {
	display: block;
	max-inline-size: 100%;
	max-block-size: calc(100vh - 12rem);
	inline-size: auto;
	block-size: auto;
	margin-inline: auto;
}

.bake-lightbox__caption {
	margin-block-start: var(--bw-spacing-8, 0.8rem);
	text-align: center;
	color: var(--bw-surface-0, #fff);
}

.bake-lightbox__count {
	position: absolute;
	z-index: 2;
	right: 10px;
	bottom: 10px;
	left: 10px;
	margin: 0;
	text-align: center;
	color: #fff;
}

.bake-lightbox__close,
.bake-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4rem;
	block-size: 4rem;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-round-full, 999px);
	background: var(--bw-surface-0, #fff);
	color: var(--bw-color-base-900, #212529);
	cursor: pointer;
}

.bake-lightbox__close:focus-visible,
.bake-lightbox__nav:focus-visible {
	outline: 2px solid var(--bw-surface-0, #fff);
	outline-offset: 2px;
}

.bake-lightbox [hidden] {
	display: none;
}