@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
@import url('tldraw/tldraw.css');

body {
	font-family: 'Inter', sans-serif;
	overscroll-behavior: none;
}

.tl-container {
	--node-shadows: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--node-shadow-border:
		0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--node-shadow-highlight:
		0 0 0 calc(1.2px / var(--tl-zoom)) var(--tl-color-selected), 0 2px 6px rgba(0, 0, 0, 0.08),
		0 1px 2px rgba(0, 0, 0, 0.04);
}

.tl-container .tl-theme__light {
	--tl-color-handle-fill: hsla(210, 100%, 56%, 0.24);
}
.tl-container .tl-theme__dark {
	--tl-color-handle-fill: hsla(209, 100%, 57%, 0.2);
}

.NodeShape {
	border-radius: var(--tl-radius-3);
	background: var(--tl-color-panel);
	box-shadow: var(--node-shadow-border);
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: column;

	.NodeShape-heading {
		padding: 0 var(--tl-space-4);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--tl-space-4);
		height: 40px;
		margin-bottom: var(--tl-space-2);
	}
}

.Port {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tl-color-panel);
	box-sizing: border-box;
	z-index: 2;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.04),
		0 1px 3px rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
	transition: transform 0.05s ease-in-out;

	[data-state='select.idle'] & {
		pointer-events: all;
	}

	&.Port_hinting {
		background: var(--tl-color-selected);
	}

	&.Port_eligible {
		box-shadow:
			0 0 0 calc(1px / var(--tl-zoom)) var(--tl-color-selected),
			0 0 0 1px rgba(0, 0, 0, 0.04),
			0 1px 3px rgba(0, 0, 0, 0.12);
	}
}

.ConnectionShape {
	stroke-width: 2px;
	stroke: var(--tl-color-text-3);
	fill: none;
}

.ConnectionShapeIndicator {
	stroke-width: 2.1px;
	stroke-linecap: round;
}