.unk-moon-phase {
	display: block;
	position: fixed;
	z-index: 21;
	top: calc(50% - 11px);
	right: max(
		var(--unk-space-md),
		calc((100vw - 1440px) / 2 + var(--unk-space-md))
	);
	width: 22px;
	height: 22px;
	color: var(--unk-color-text);
	pointer-events: auto;
}

.unk-moon-phase__graphic {
	display: block;
	width: 100%;
	height: 100%;
}

.unk-moon-phase__fill {
	fill: currentColor;
}

.unk-moon-phase__border {
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
}

.unk-moon-phase__preview {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	width: 14rem;
	height: 14rem;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
	will-change: transform;
}

.unk-moon-phase__preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.unk-moon-phase__preview--visible {
	opacity: 1;
	visibility: visible;
}

.unk-moon-phase__preview[hidden] {
	display: none;
}

body[data-template="single-project"] .unk-moon-phase,
html.unk-document--inspiration-gallery .unk-moon-phase,
html.unk-document--inspiration-intro .unk-moon-phase,
html.unk-document--inspiration-header-entrance .unk-moon-phase,
html:has(.unk-view-inspiration--intro-pending) .unk-moon-phase {
	display: none;
}

@media (max-width: 47.999em) {
	.unk-moon-phase {
		top: auto;
		right: var(--unk-space-md);
		bottom: var(--unk-space-md);
	}
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
	.unk-moon-phase__preview {
		display: none !important;
	}
}