.scroll-area {
	position: absolute !important;
	inset: 12px;
	top: 0;

	>div>div {
		height: 100%;
	}
}

.fields-scroll>div>div {
	display: block !important;
}

.list {
	padding-left: 24px;

	li::marker {
		color: var(--mantine-color-surreal-5);
	}
}

.diagram {

	// :global(.react-flow__handle) {
	// 	// backdrop-filter: blur(2px);
	// 	// -webkit-backdrop-filter: blur(2px);
	// 	background-color: rgba(0, 0, 0, 0.4) !important;
	// 	border: 1px solid var(--mantine-color-slate-5) !important;
	// 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	cursor: unset;

	// 	&::before {
	// 		content: "";
	// 		width: 9px;
	// 		height: 9px;
	// 		border-radius: 100%;
	// 		background-color: white;
	// 	}
	// }

	// :global(.react-flow__handle-left) {
	// 	width: 18px;
	// 	height: 18px;
	// 	left: -9px;
	// }

	// :global(.react-flow__handle-right) {
	// 	width: 18px;
	// 	height: 18px;
	// 	right: -9px;
	// }

	:global(.react-flow__edge > path) {
		stroke-width: 2px;
		stroke: white !important;
	}

	:global(.react-flow__edge-textbg) {
		fill: var(--mantine-color-slate-7) !important;
	}

	:global(.react-flow__edge).record-link path {
		stroke: var(--mantine-color-slate-5) !important;
		stroke-dasharray: 5;
	}

	:global(.react-flow__node),
	:global(.react-flow__edge) :global(.react-flow__edge-text),
	:global(.react-flow__edge)>path,
	:global(.react-flow__edge) :global(.react-flow__edge-textbg) {
		transition: opacity 0.15s ease-in-out;
	}

	:global(.react-flow__node.dimmed),
	:global(.react-flow__edge.dimmed) :global(.react-flow__edge-text),
	:global(.react-flow__edge.dimmed)>path {
		opacity: 0.2;
	}

	:global(.react-flow__edge.dimmed) :global(.react-flow__edge-textbg) {
		opacity: 0;
	}


	@include light {

		:global(.react-flow__edge-textbg) {
			fill: var(--mantine-color-slate-1) !important;
		}

		:global(.react-flow__handle) {
			background-color: rgba(255, 255, 255, 0.01) !important;
			border: 1px solid var(--mantine-color-slate-2) !important;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

			&::before {
				background-color: var(--mantine-color-slate-4);
			}
		}

		:global(.react-flow__edge > path) {
			stroke: var(--mantine-color-slate-3) !important;
		}

	}
}