Module:Dimensions/styles.css

.template-dimensions {
	--container-size: 140px;
	--rotate-x: 45deg;
	--rotate-z: -45deg;
	--object-longest-side: max(
		var(--object-length),
		var(--object-width),
		var(--object-height)
	);
	--object-scale: calc(var(--container-size) / var(--object-longest-side));
	--box-length: calc(var(--object-length) * var(--object-scale));
	--box-width: calc(var(--object-width) * var(--object-scale));
	--box-height: calc(var(--object-height) * var(--object-scale));
	/*
	--container-width: calc(
		(
			var(--box-width) * cos(max(var(--rotate-z), -1 * var(--rotate-z))) +
				var(--box-length) *
				sin(max(var(--rotate-z), -1 * var(--rotate-z)))
		)
	);
	*/
	--container-height: calc(
		var(--box-height) / 2 + hypot(var(--box-length), var(--box-width)) +
			var(--space-md) * 2
	);

	border-radius: var(--border-radius-medium);
	font-size: var(--font-size-small);
	line-height: var(--line-height-xx-small);
	overflow: hidden;
	display: grid;
	place-content: center;
	height: var(--container-height);
}

.template-dimensions-label {
	letter-spacing: 0.05em;
}

.template-dimensions-data {
	color: var(--color-emphasized);
	font-weight: var(--font-size-medium);
}

.template-dimensions-label,
.template-dimensions-data-subtle {
	color: var(--color-subtle);
	font-size: var(--font-size-x-small);
}

.template-dimensions-isometric {
	--color-surface-3--lighter: hsl(
		var(--color-primary__h),
		var(--color-surface-3__s),
		calc(var(--color-surface-3__l) + var(--delta-lightness-hover-state))
	);
	--color-surface-3--darker: hsl(
		var(--color-primary__h),
		var(--color-surface-3__s),
		calc(var(--color-surface-3__l) - var(--delta-lightness-hover-state))
	);
	--box-position-offset-up: calc(var(--box-height) / 2);
	--box-position-offset-down: calc(var(--box-height) / -2);
	--dimensions-isometric-transform: rotateX(var(--rotate-x))
		rotateZ(var(--rotate-z));
	--dimensions-isometric-invert-transform: rotateZ(calc(var(--rotate-z) * -1))
		rotateX(calc(var(--rotate-x) * -1));
	transform: var(--dimensions-isometric-transform);
	display: grid;
	transition-property: transform;
	transition-duration: 250ms;
	transition-timing-function: var(--transition-timing-function-ease);
}

.template-dimensions-layer {
	--layer-transform: translateZ(var(--layer-z));
	width: var(--box-length);
	height: var(--box-width);
	grid-area: layer;
	transform: var(--layer-transform);
	transition: inherit;
}

.template-dimensions-layer-top {
	--layer-z: var(--box-position-offset-up);
}

.template-dimensions-layer-bottom {
	--layer-z: var(--box-position-offset-down);
	box-shadow: var(--box-shadow-drop-xx-large);
}

.template-dimensions-box-faces {
	position: absolute;
	inset: 0;
	--box-transform-front: rotateY(90deg)
		translateX(var(--box-position-offset-up));
	--box-transform-right: rotateX(90deg)
		translateY(var(--box-position-offset-down));
}

.template-dimensions-box-face {
	position: absolute;
	box-shadow: var(--box-shadow-border);
}

/* Top */
.template-dimensions-box-face-top {
	inset: 0;
	background-color: var(--color-surface-3--lighter);
	width: var(--box-length);
	height: var(--box-width);
}

/* Front */
.template-dimensions-box-face-front {
	top: 0;
	left: var(--box-position-offset-down);
	width: var(--box-height);
	height: var(--box-width);
	background-color: var(--color-surface-3);
	transform: var(--box-transform-front);
}

/* Right */
.template-dimensions-box-face-right {
	bottom: var(--box-position-offset-down);
	left: 0;
	background-color: var(--color-surface-3--darker);
	width: var(--box-length);
	height: var(--box-height);
	transform: var(--box-transform-right);
}

.template-dimensions-box-text {
	position: absolute;
	padding: var(--space-xs) 0;
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	transition: inherit;
}

.template-dimensions-box-text-y {
	--box-transform-text-y: translateX(100%)
		translateY(var(--box-position-offset-up));
	bottom: 0;
	right: 0;
	padding: 0 var(--space-xs);
	transform: var(--dimensions-isometric-invert-transform)
		var(--box-transform-text-y);
	transform-origin: bottom right;
}

.template-dimensions-box-text-x {
	width: var(--box-width);
	transform: rotate(90deg);
	transform-origin: top left;
}

.template-dimensions-box-text-z {
	--box-transform-text-z-top: translateY(calc(var(--box-width) * -1));
	--box-transform-text-z-bottom: translateY(100%);
	bottom: 0;
	right: 0;
	width: var(--box-length);
}

.template-dimensions-layer-top .template-dimensions-box-text-z {
	transform: var(--box-transform-text-z-top);
	align-items: end;
}

.template-dimensions-layer-bottom .template-dimensions-box-text-z {
	transform: var(--box-transform-text-z-bottom);
}

.template-dimensions-reference {
	--reference-transform: scale3d(
			var(--reference-scale-length),
			var(--reference-scale-width),
			calc(var(--reference-scale-height) * -1)
		)
		translateX(calc(-100% - var(--space-xs)));
	--reference-scale-length: calc(
		var(--reference-length) / var(--object-length)
	);
	--reference-scale-width: calc(var(--reference-width) / var(--object-width));
	--reference-scale-height: calc(
		var(--reference-height) / var(--object-height)
	);
	transform: var(--reference-transform);
	transform-origin: bottom left;
}

.template-dimensions-reference .template-dimensions-box-face {
	background-color: var(--color-progressive);
	opacity: 0.5;
}

.template-dimensions:hover {
	--rotate-z: 0deg;
	--rotate-x: 0deg;
}

.template-dimensions:hover
	.template-dimensions-layer-top
	.template-dimensions-box-text-z {
	--box-transform-text-z-top: translateY(calc(var(--box-width) * -1))
		translateX(calc(var(--box-length) * -1 + 100%));
}

.template-dimensions:hover .template-dimensions-box-text-x {
	writing-mode: vertical-lr;
	align-items: flex-start;
}

.template-dimensions:hover .template-dimensions-box-text-y {
	--box-transform-text-y: translateX(100%);
	align-items: start;
}

.template-dimensions:hover .template-dimensions-box-text-x > div {
	transform: scale(-1);
}