#tab-preview-panel {
	/* Matches Zen main background color, also supports gradients */
	@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledBackgroundNative') {
		--panel-background: var(--zen-main-browser-background-toolbar) !important;
	}

	/* Matches Zen panel radius */
	@media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
		border-radius: var(--panel-border-radius) !important;
	}

	/* Custom border radius for tab preview*/
	@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
		--panel-border-radius: var(
			--zen-mods-TabPreviewEnhanced-borderRadiusAmount
		) !important;
	}

	/* Removes border around tab preview */
	--zen-appcontent-border: transparent !important;

	/* Shifts panel to the slightly right */
	/* TODO: Make customizable */
	margin-left: 0.5em !important;
}

.tab-preview-thumbnail-container {
	/* Fixes proper tab preview image sizing */
	&:has(canvas) {
		@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledMargins') {
			/* Add padding around tab preview image */
			padding: var(--zen-element-separation);
		}

		/* Hide border above preview */
		border-top: none !important;

		/* Hides padding between tab preview image and tab preview title */
		padding-top: 0 !important;

		/* Shrink preview to match added padding */
		/* TODO: Make optional */
		width: calc(var(--panel-width) - (var(--zen-element-separation) * 2)) px !important;
		height: unset !important;

		/* Some safety code to maintain aspect ratio */
		aspect-ratio: 2 / 1 !important;
	}

	canvas {
		/* Matches Zen panel radius */
		@media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
			border-radius: calc(var(--panel-border-radius) / 1.3) !important;
		}

		/* Custom border radius for tab preview image */
		@media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') {
			border-radius: calc(
				var(--zen-mods-TabPreviewEnhanced-borderRadiusAmount) / 1.3
			) !important;
		}
	}
}