.svg-honeycomb {
	.svg-honeycomb-container {
		--color: #{$honeycomb-label-color};
		--fill: #{$honeycomb-cell-color};
		--stroke: transparent;
		--no-data-color: #{$honeycomb-no-data-label-color};
		--no-data-fill: #{$honeycomb-no-data-cell-color};
	}

	feDropShadow {
		flood-opacity: var(--shadow-opacity, 0);

		@if $ui-transitions {
			transition: flood-opacity $ui-transition-duration;
		}
	}

	.svg-honeycomb-cell {
		--px: calc(var(--x) + var(--dx, 0px));
		--py: calc(var(--y) + var(--dy, 0px));
		--cell-stroke: var(--stroke);
		--cell-stroke-width: var(--stroke-width);

		cursor: pointer;

		path {
			fill: var(--fill);
			stroke: var(--cell-stroke);
			stroke-width: var(--cell-stroke-width);
			transform: translate(var(--px), var(--py)) scale(var(--scale, 1));

			&.svg-honeycomb-backdrop {
				--fill: transparent;
				--cell-stroke: transparent;

				transform: translate(var(--x), var(--y));
			}

			@if $ui-transitions {
				transition: transform $ui-transition-duration,
							fill $ui-transition-duration * 2,
							stroke $ui-transition-duration * 2,
							stroke-width $ui-transition-duration;
			}
		}

		foreignObject {
			@if $ui-transitions {
				transition: x $ui-transition-duration,
							y $ui-transition-duration,
							width $ui-transition-duration,
							height $ui-transition-duration;
			}
		}

		.svg-honeycomb-content {
			display: grid;
			grid-auto-rows: minmax(max-content, auto);
			align-content: stretch;
			align-items: center;
			height: 100%;
			padding: 0 2em;
			text-align: center;
			line-height: var(--line-height);
			color: var(--color);
		}

		.svg-honeycomb-label {
			overflow: hidden;

			> div {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			@if $ui-transitions {
				transition: max-height $ui-transition-duration,
							font-size $ui-transition-duration;
			}
		}

		&:hover {
			--stroke: var(--stroke-selected);
		}

		&.svg-honeycomb-cell-selected {
			--cell-stroke: var(--stroke-selected);
			--cell-stroke-width: calc(var(--stroke-width) * 2);
		}
	}

	.svg-honeycomb-cell-no-data,
	.svg-honeycomb-cell-other {
		--color: var(--no-data-color);
		--fill: var(--no-data-fill);
		--stroke-selected: transparent;

		cursor: default;
	}

	.svg-honeycomb-cell-other-ellipsis {
		transform: translate(var(--px), var(--py));

		circle {
			fill: var(--color);
		}
	}
}

.dashboard-is-edit-mode {
	.svg-honeycomb-container:not(:hover) {
		.svg-honeycomb-cell {
			path,
			foreignObject,
			.svg-honeycomb-label {
				@if $ui-transitions {
					transition: none;
				}
			}
		}
	}
}
