/*------------------------------------------------------------------------------*/
/* Fancybox
/*------------------------------------------------------------------------------*/

.fancybox__container {
	--fancybox-color:  var(--color-text-light-darker);
	--fancybox-hover-color:  var(--color-text-light-lighter);
}

.fancybox__backdrop {
	--fancybox-bg: var(--backdrop-color);
}

.fancybox__toolbar__column {
	gap: 1px;
}

.f-button {
	--f-button-border-radius: var(--border-radius-buttons);
	color: var(--fancybox-color);
}

.f-button:hover {
	color: var(--fancybox-hover-color);
}

.fancybox__content {
	border-radius: var(--border-radius-medium);
}

.fancybox-image {
	border-radius: var(--border-radius);
}

.fancybox__caption {
	text-align: center;
}

.fancybox__thumbs,
.is-compact .fancybox__thumbs {
	--f-thumb-width: 50px;
	--f-thumb-height: 50px;
	--f-thumb-border-radius: var(--border-radius);
	--f-thumb-outline: 2px;
	--f-thumb-outline-color: var(--color-accent);
}

.f-thumbs__slide {
	box-sizing: border-box;
}

.f-thumbs__slide__button {
	--border-radius-buttons: var(--border-radius);
}

.is-compact .fancybox__footer {
	background: transparent;
}

/* Stroke width variations */

.fancybox__nav,
.fancybox__toolbar {
	--f-button-svg-stroke-width: 1.5;
}

@container style(--fa-style: 100) {
	.fancybox__nav,
	.fancybox__toolbar {
		--f-button-svg-stroke-width: .75;
	}
}

@container style(--fa-style: 300) {
	.fancybox__nav,
	.fancybox__toolbar {
		--f-button-svg-stroke-width: 1;
	}
}

@container style(--fa-style: 900) {
	.fancybox__toolbar {
		--f-button-svg-stroke-width: 1.5;
	}

	.fancybox__nav,
	.fancybox__toolbar {
		--f-button-svg-stroke-width: 2;
	}
}

/*------------------------------------------------------------------------------*/
/* Custom Modal
/*------------------------------------------------------------------------------*/

.fancybox__content:has(.ModalContainer) {
	padding: 0;
}

.fancybox__content:has(.ModalClose) .f-button.is-close-btn {
	display: none;
}