@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/draggable-entity-card.css

@@ -0,0 +1,1140 @@
+.canvas-draggable-card {
+	max-width: 284px;
+	width: 284px;
+}
+
+.canvas-draggable-card__body {
+	width: 284px;
+	background: #fff;
+	border-radius: 10px;
+	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
+	/* z-index: 1; */
+}
+
+.suggestion {
+	opacity: 0.45;
+	/* Add */
+	/* cursor: pointer; */
+}
+
+.canvas-draggable-card__body__disabled {
+	cursor: not-allowed;
+}
+
+/* Add a custom cursor to the 'canvas-draggable-card' class only if the body cursor style is set to 'auto' */
+.canvas:not(.selection-cursor) .canvas-draggable-card:not(.disabled) {
+	cursor: grab;
+}
+
+.canvas:not(.selection-cursor) .logic-error-icon {
+	cursor: pointer;
+}
+
+.canvas-draggable-card.selected .canvas-draggable-card__body {
+	/* border: 2px solid var(--color-main-primary); */
+	/* Border on the outside */
+	box-shadow: 0px 0px 0px 2px var(--color-main-primary);
+}
+
+.canvas-draggable-card__body.no-card-shadow {
+	/* Reset shadow to none */
+	box-shadow: none !important;
+}
+
+.entity-error-menu i.fa-circle-exclamation {
+	color: var(--color-main-error);
+}
+
+.entity-error-menu i.fa-triangle-exclamation {
+	color: var(--color-main-warning);
+}
+
+.entity-error-menu i.circle-info {
+	color: var(--color-main-primary);
+}
+
+.entity-error-menu i.circle-check {
+	color: var(--color-main-success);
+}
+
+.canvas-draggable-card .canvas-draggable-card__header {
+	width: 100%;
+	padding: 14px 10px 14px 16px;
+	position: relative;
+	border-radius: 10px;
+}
+
+/*
+	"Unreachable" pulse overlay.
+
+	`getCardGradientStatement` in `services/editor/ui.ts` emits a
+	`--unreachable-stripes-bg` custom property on the header's inline style
+	whenever the entity carries the blocked-reachability error. We detect
+	that via an attribute selector — no className threading, no per-card
+	component edits — and layer a pseudo-element on top of the header that
+	cross-fades the diagonal stripes in and out so the node visibly pulses.
+
+	Header content stays above the overlay because the header is
+	`position: relative` (so the absolutely-positioned `::before` is
+	bounded by it) and the actual children of the header are part of the
+	natural flow at z-index `auto`, which paints AFTER a `z-index: 0`
+	pseudo-element thanks to `isolation: isolate`. `pointer-events: none`
+	on the overlay keeps clicks/hover going to the real header controls.
+*/
+.canvas-draggable-card
+	.canvas-draggable-card__header[style*="--unreachable-stripes-bg"],
+.canvas-draggable-card
+	.canvas-draggable-card__header--small[style*="--unreachable-stripes-bg"] {
+	isolation: isolate;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__header[style*="--unreachable-stripes-bg"]::before,
+.canvas-draggable-card
+	.canvas-draggable-card__header--small[style*="--unreachable-stripes-bg"]::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	border-radius: inherit;
+	background: var(--unreachable-stripes-bg);
+	pointer-events: none;
+	/* Negative stack level so the stripes paint BEFORE the header's in-flow
+	   content (text, icons, action buttons). With `z-index: 0` they ended up
+	   above the in-flow children — per the CSS painting order, positioned
+	   elements with `z-index: 0` paint after in-flow non-positioned content,
+	   which is why the header text was disappearing at the pulse peak. The
+	   parent's `isolation: isolate` traps this negative z-index inside the
+	   header so it can't escape and paint behind ancestors. */
+	z-index: -1;
+	animation: unreachable-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes unreachable-pulse {
+	0%,
+	100% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
+.canvas-draggable-card .canvas-draggable-card__header--small {
+	width: 100%;
+	padding: 6px 8px 6px 10px;
+	position: relative;
+	border-radius: 10px;
+}
+
+.canvas-draggable-card__header__actions {
+	display: flex;
+	/* gap: 10px; */
+}
+
+.canvas-draggable-card .canvas-draggable-card__header__definition-entity {
+	padding: 14px 16px 14px 16px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__header__definition-entity
+	.canvas-draggable-card__header__subheader {
+	color: var(--color-light-grey);
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__header__definition-entity
+	.canvas-draggable-card__header__left-block {
+	gap: 14px;
+}
+
+.definition-entity-icon {
+	opacity: 0.6;
+}
+
+.definition-entity-icon-small {
+	width: 12px;
+	height: 12px;
+}
+
+.definition-entity-icon-medium {
+	width: 16px;
+	height: 16px;
+}
+
+.definition-entity-icon-large {
+	width: 26px;
+	height: 26px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__header--small,
+.canvas-draggable-card .canvas-draggable-card__header,
+.canvas-draggable-card .canvas-draggable-card__output-property__header,
+.canvas-draggable-card .canvas-draggable-card__header__definition-entity {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.canvas-draggable-card__backdrop__operation,
+.canvas-draggable-card__backdrop__function-call {
+	background: var(--color-background-support--function-call);
+	color: var(--color-text--function-call);
+}
+
+.canvas-draggable-card__backdrop__search {
+	background: var(--color-background-support--search);
+	color: var(--color-text--search);
+}
+
+.canvas-draggable-card__backdrop__loop {
+	background: var(--color-background-support--loop);
+	color: var(--color-text--loop);
+}
+
+.canvas-draggable-card__backdrop__condition {
+	background: var(--color-background-support--condition);
+	color: var(--color-text--condition);
+}
+
+.canvas-draggable-card__backdrop__return-statement,
+.canvas-draggable-card__backdrop__break-statement,
+.canvas-draggable-card__backdrop__continue-statement {
+	background: var(--color-background-support--return-statement);
+	color: var(--color-text--return-statement);
+}
+
+.canvas-draggable-card__backdrop__variable-declaration,
+.canvas-draggable-card__backdrop__variable-instance {
+	background: var(--color-background-support--variable-declaration);
+	color: var(--color-text--variable-declaration);
+}
+
+.canvas-draggable-card__backdrop__function-declaration,
+.canvas-draggable-card__backdrop__property-event,
+.canvas-draggable-card__backdrop__global-event {
+	background: var(--color-background-support--global-event);
+	color: var(--color-text--global-event);
+}
+
+.canvas-draggable-card__backdrop__installed-project {
+	background: var(--color-background-support--project);
+	color: var(--color-text--project);
+}
+
+.canvas-draggable-card__backdrop__global-event__suggestion,
+.canvas-draggable-card__backdrop__function-declaration__suggestion {
+	background: var(--color-background-suggestion--function-declaration);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__variable-declaration__suggestion,
+.canvas-draggable-card__backdrop__variable-instance__suggestion {
+	background: var(--color-background-suggestion--variable-declaration);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__function-call__suggestion,
+.canvas-draggable-card__backdrop__operation__suggestion {
+	background: var(--color-background-suggestion--function-call);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__search__suggestion {
+	background: var(--color-background-suggestion--search);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__loop__suggestion {
+	background: var(--color-background-suggestion--loop);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__condition__suggestion {
+	background: var(--color-background-suggestion--condition);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__return-statement__suggestion,
+.canvas-draggable-card__backdrop__break-statement__suggestion,
+.canvas-draggable-card__backdrop__continue-statement__suggestion {
+	background: var(--color-background-suggestion--return-statement);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__global-event__disabled,
+.canvas-draggable-card__backdrop__function-declaration__disabled {
+	background: var(--color-background-disabled--function-declaration);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__variable-declaration__disabled,
+.canvas-draggable-card__backdrop__variable-instance__disabled {
+	background: var(--color-background-disabled--variable-declaration);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__function-call__disabled,
+.canvas-draggable-card__backdrop__operation__disabled {
+	background: var(--color-background-disabled--function-call);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__search__disabled {
+	background: var(--color-background-disabled--search);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__loop__disabled {
+	background: var(--color-background-disabled--loop);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__condition__disabled {
+	background: var(--color-background-disabled--condition);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__backdrop__return-statement__disabled,
+.canvas-draggable-card__backdrop__break-statement__disabled,
+.canvas-draggable-card__backdrop__continue-statement__disabled {
+	background: var(--color-background-disabled--return-statement);
+	color: rgba(0, 0, 0, 0.5);
+}
+
+.canvas-draggable-card__header__left-block {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	overflow: hidden;
+}
+
+.canvas-draggable-card__header__labels {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	overflow: hidden;
+}
+
+.canvas-draggable-card__header__labels p {
+	margin: 0;
+	font-size: 12px;
+	font-weight: 400;
+}
+
+.canvas-draggable-card .canvas-draggable-card__header h3 {
+	margin: 0;
+	font-weight: 600;
+	font-size: 14px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__header__definition-entity h3 {
+	margin: 0;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.canvas-draggable-card.active {
+	cursor: move;
+	user-select: none;
+}
+
+.canvas-draggable-card .canvas-draggable-card__property-list {
+	display: flex;
+	padding: 10px 0px;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+	gap: 10px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__no-properties {
+	text-align: center;
+	color: var(--color-light-grey);
+	/* Italic */
+	font-style: italic;
+	margin: 4px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__property-list.canvas-draggable-card__property-list__align-right {
+	align-items: end;
+}
+
+.canvas-draggable-card__standard-property {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 10px 0px 16px;
+	position: relative;
+	/* Disable text selection */
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+}
+
+.canvas-draggable-card__property__small {
+	font-size: 10px;
+}
+
+.canvas-draggable-card__input-property {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0px 16px 0px 16px;
+	position: relative;
+}
+
+.canvas-draggable-card__method-property {
+	box-sizing: border-box;
+	width: 100%;
+	position: relative;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	/* Disable text selection */
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 5px;
+}
+
+.canvas-draggable-card__body__disabled .canvas-draggable-card__method-property {
+	/* Normal arrow */
+	cursor: initial;
+}
+
+.canvas-draggable-card__body__disabled .canvas-draggable-card__method-property.canvas-draggable-card__method-property__disabled {
+	cursor: not-allowed;
+}
+
+.canvas-draggable-card__method-property__disabled {
+	cursor: not-allowed;
+}
+
+/* Add 'margin-bottom: 20px;' to all .canvas-draggable-card__method-property in the card content, except the of its kind */
+.canvas-draggable-card__content
+	.canvas-draggable-card__method-property:not(:last-of-type) {
+	margin-bottom: 20px;
+}
+
+.canvas-draggable-card__nested-card {
+	box-sizing: border-box;
+	width: 100%;
+	position: relative;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	/* Disable text selection */
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+}
+
+/*
+	Contains the shared styling between the main error and main value properties
+	This are important input/output properties in a card that are highlited with a solid background
+	and offset to the right of left, overflowing their parent card
+*/
+.canvas-draggable-card__main-property {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 6px 16px;
+	position: relative;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	/* Disable text selection */
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+}
+
+.canvas-draggable-card__error-property {
+	background-color: var(--color-main-error);
+}
+
+.canvas-draggable-card__main-value-property {
+	/* background-color: var(--color-background--variable-declaration); */
+}
+
+.canvas-draggable-card__execution-in-progress-value {
+	background-color: var(--color-background--function-call);
+}
+
+.canvas-draggable-card__main-value-property
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__main-value-property
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__execution-in-progress-value
+	.canvas-draggable-card__property__type {
+	color: var(--color-dark-grey);
+}
+
+.canvas-draggable-card__main-value-property i {
+	color: var(--color-main-primary);
+}
+
+.canvas-draggable-card__main-output-property {
+	right: -15px;
+}
+
+.canvas-draggable-card__main-input-property {
+	left: -15px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__output-property__header {
+	width: 100%;
+	padding: 8px 22px 6px 16px;
+	position: relative;
+	border-radius: 10px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__output-property__header h3 {
+	margin: 0;
+	font-weight: 600;
+	font-size: 12px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__output-property__header
+	.canvas-draggable-card-header__icon {
+	color: var(--color-main-grey);
+}
+
+.canvas-draggable-card__internal-call {
+	box-sizing: border-box;
+	/* Calculate with to be 100% plus 15px */
+	width: calc(100% + 15px);
+	/* padding: 6px 16px; */
+	position: relative;
+	/* Border radius only on the left corners */
+	border-radius: 10px 0px 0px 10px;
+	display: flex;
+	align-items: center;
+	/* Disable text selection */
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+
+	/* Colors */
+	background-color: var(--color-background-support--function-call);
+}
+
+.canvas-draggable-card__main-output-property__top-margin {
+	margin-top: 8px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__header__left-block
+	.omrs-input-helper,
+.canvas-draggable-card__input-property .omrs-input-helper,
+.canvas-draggable-card__output-property .omrs-input-helper {
+	display: none;
+}
+
+.canvas-draggable-card__output-property {
+	width: 100%;
+	padding: 0px;
+	box-sizing: border-box;
+	/* cursor: default; */
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 16px 0px 16px;
+	position: relative;
+}
+
+.canvas-draggable-card__output-property .omrs-input-group {
+	width: 100%;
+}
+
+.canvas-draggable-card .canvas__node__float-right,
+.canvas__new-entity-menu .canvas__node__float-right {
+	position: absolute;
+	right: -24px;
+}
+
+.canvas-draggable-card .canvas__node__success-error-node-stack,
+.canvas__new-entity-menu .canvas__node__success-error-node-stack {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.canvas-draggable-card .canvas__node__vertical-center,
+.canvas__new-entity-menu .canvas__node__vertical-center {
+	transform: translateY(-50%);
+	top: 50%;
+}
+
+.canvas-draggable-card .canvas__node__float-left,
+.canvas__new-entity-menu .canvas__node__float-left {
+	position: absolute;
+	left: -24px;
+}
+
+.canvas-draggable-card .canvas__small-node,
+.canvas__new-entity-menu .canvas__small-node {
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	font-size: 10px;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+
+.canvas-draggable-card .canvas__small-node--position,
+.canvas__new-entity-menu .canvas__small-node--position {
+	top: 28%;
+	position: absolute;
+	right: -7px;
+	z-index: 1;
+}
+
+.canvas-draggable-card .disabled {
+	opacity: 0.5;
+}
+
+.canvas-draggable-card .canvas__large-node,
+.canvas__new-entity-menu .canvas__large-node {
+	width: 21px;
+	height: 21px;
+	border-radius: 50%;
+	/* cursor: pointer; */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+
+.canvas:not(.globally-disabled) .canvas__large-node:hover:not(:disabled),
+.canvas:not(.globally-disabled) .canvas__small-node:hover:not(:disabled) {
+	transform: scale(1.05);
+	cursor: pointer;
+}
+.canvas__large-node:disabled,
+.canvas__small-node:disabled {
+	transform: scale(1);
+  cursor: not-allowed;
+}
+
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled) .canvas__small-node:not(:disabled),
+.canvas:not(.globally-disabled) .canvas__new-entity-menu .canvas__small-node:not(:disabled),
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled) .canvas__large-node:not(:disabled),
+.canvas:not(.globally-disabled) .canvas__new-entity-menu .canvas__large-node:not(:disabled) {
+	cursor: pointer;
+}
+
+.canvas-draggable-card .canvas__small-node:disabled,
+.canvas__new-entity-menu .canvas__small-node:disabled,
+.canvas-draggable-card .canvas__large-node:disabled,
+.canvas__new-entity-menu .canvas__large-node:disabled {
+  cursor: not-allowed;
+}
+
+.canvas__node__logic-scope-caller-node-stack.disabled,
+.canvas__node__success-error-node-stack.disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.canvas-draggable-card .canvas__large-node .canvas__node__center-ref {
+	visibility: hidden;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	/* Center */
+	transform: translate(-50%, -50%);
+	width: 1px;
+	height: 1px;
+}
+
+.canvas-draggable-card .canvas__large-node__caller {
+	background-color: var(--color-main-grey);
+	color: var(--color-contrast-success);
+	font-size: 10px;
+}
+
+.canvas-draggable-card .canvas__large-node__caller:hover {
+	transform: scale(1.05);
+}
+
+.canvas-draggable-card .canvas__node__success:not(:disabled),
+.canvas__new-entity-menu .canvas__node__success:not(:disabled) {
+	background-color: var(--color-main-success);
+	color: var(--color-contrast-success);
+}
+
+.canvas-draggable-card .canvas__node__failure:disabled,
+.canvas__new-entity-menu .canvas__node__failure:disabled,
+.canvas-draggable-card .canvas__node__success:disabled,
+.canvas__new-entity-menu .canvas__node__success:disabled {
+	background-color: var(--color-light-grey);
+	color: white;
+}
+
+.canvas-draggable-card .canvas__node__success:hover:not(:disabled),
+.canvas__new-entity-menu .canvas__node__success:hover:not(:disabled) {
+	background-color: var(--color-main-dark-success);
+	color: var(--color-contrast-success);
+}
+
+.canvas-draggable-card .canvas__node__failure:not(:disabled),
+.canvas__new-entity-menu .canvas__node__failure:not(:disabled) {
+	background-color: var(--color-main-error);
+	color: var(--color-contrast-error);
+}
+
+.canvas-draggable-card .canvas__node__failure:not(:disabled):hover,
+.canvas__new-entity-menu .canvas__node__failure:not(:disabled):hover {
+	background-color: var(--color-main-dark-error);
+	color: var(--color-contrast-error);
+}
+
+.canvas-draggable-card .canvas__medium-node {
+	/* Make it bigger */
+	width: 20px;
+	height: 20px;
+	/* left: -10px; */
+}
+
+/* Small little drop shadow on the left edge */
+.canvas-draggable-card .canvas__node__left-shadow {
+	box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.05);
+}
+
+.canvas-draggable-card .canvas__small-node.canvas__node__new {
+	background-color: var(--color-main-primary);
+	display: none;
+	/* Make it bigger */
+	/* width: 20px;
+	height: 20px; */
+}
+
+.canvas-property__node__connected {
+	background-color: var(--color-light-grey);
+}
+
+.canvas__node__vertical-center {
+	position: absolute;
+	top: 0;
+	right: -7px;
+	z-index: 1;
+}
+
+.canvas__node__left {
+	position: absolute;
+	left: -7px;
+	z-index: 1;
+}
+
+.canvas__node__active {
+	background-color: var(--color-main-primary);
+}
+
+.canvas-draggable-card:not(.disabled)
+	.canvas-draggable-card__property-row:hover
+	> .canvas-property__node.canvas__node__new {
+	background-color: var(--color-main-primary);
+	display: block;
+}
+
+.canvas-draggable-card__property-row.disabled {
+	opacity: 0.5;
+}
+
+.canvas-draggable-card__property-row.suggestion {
+	opacity: 0.8;
+}
+
+.canvas-draggable-card .canvas-new-draggable-card-header {
+	font-size: 23px;
+	font-weight: 500;
+	padding: 14px 30px 0px 30px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.canvas-draggable-card .canvas-draggable-card__content {
+	width: 100%;
+	padding: 0px 0px 16px 0px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__content.canvas-draggable-card__content__small-padding-bottom {
+	padding: 0px 0px 8px 0px;
+}
+
+.canvas-draggable-card
+	.canvas-draggable-card__content.canvas-draggable-card__content__no-padding-bottom {
+	padding: 0px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__content__border {
+	border-top: 1px solid #ccc;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action {
+	width: 100%;
+	display: flex;
+	padding: 10px 16px 0px 16px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action.align-right {
+	justify-content: flex-end;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action.align-left {
+	justify-content: flex-start;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action-alt {
+	width: 100%;
+	display: flex;
+	padding: 10px 0px 0px 0px;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action-alt.align-right {
+	justify-content: flex-end;
+}
+
+.canvas-draggable-card .canvas-draggable-card__action-alt.align-left {
+	justify-content: flex-start;
+}
+
+/* Hide helper text are on header input fields */
+.canvas-draggable-card .omrs-input-helper {
+	position: relative;
+	top: -8px;
+}
+
+.canvas-draggable-card__property__right-block,
+.canvas-draggable-card__property__left-block {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	overflow: hidden;
+	max-width: 100%;
+}
+
+.canvas-draggable-card__property__right-block {
+	text-align: end;
+}
+
+.canvas-draggable-card__property__labels-group {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	overflow: hidden;
+}
+
+.canvas-draggable-card__property__right-block
+	.canvas-draggable-card__property__labels-group {
+	align-items: end;
+}
+
+.canvas-draggable-card__property__name {
+	font-size: 14px;
+	font-weight: 500;
+	color: #000;
+	margin: 0;
+}
+
+.canvas-draggable-card__output-property__name {
+	font-size: 14px;
+	font-weight: 500;
+	text-align: end;
+	color: #000;
+	margin: 0;
+}
+
+.canvas-draggable-card__property__small
+	.canvas-draggable-card__property__name,
+.canvas-draggable-card__property__small
+	.canvas-draggable-card__output-property__name {
+	font-size: 12px;
+}
+
+.canvas-draggable-card__property__type {
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--color-light-grey);
+	margin: 0;
+}
+
+.canvas-draggable-card__output-property__type {
+	font-size: 12px;
+	text-align: end;
+	font-weight: 400;
+	color: var(--color-light-grey);
+	margin: 0;
+}
+
+.canvas-draggable-card__property__value {
+	color: var(--color-main-primary);
+	font-weight: 600;
+	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+	/* Truncate text so it doesn't overflow */
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Add a custom cursor to the 'canvas-draggable-card__property__value' class only if the body cursor style is set to 'auto' */
+.canvas:not(.selection-cursor) .canvas-draggable-card__property__value {
+	cursor: url(../../assets/pencil.png) 2 20, context-menu;
+}
+
+/* Decides the color of the data type label (property subtitle) based on the background color of the entity type it is displayed on */
+.canvas-draggable-card__backdrop__function-call
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__function-call
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__backdrop__property-event
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__property-event
+	.canvas-draggable-property__type,
+.canvas-draggable-card__backdrop__global-event
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__global-event .canvas-draggable-property__type,
+.canvas-draggable-card__backdrop__project
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__project
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__backdrop__condition
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__condition
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__backdrop__function-declaration
+	.canvas-draggable-card__output-property__type,
+.canvas-draggable-card__backdrop__function-declaration
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__backdrop__variable-declaration
+	.canvas-draggable-card__property__type,
+.canvas-draggable-card__backdrop__variable-instance
+	.canvas-draggable-card__property__type {
+	color: var(--color-main-grey);
+}
+
+.canvas-draggable-card__property-row__menu-button {
+	visibility: hidden;
+}
+
+.canvas-draggable-card__property-row__menu-button {
+	visibility: hidden;
+}
+
+.property-menu {
+	/* Important, to override hover on parent */
+	visibility: visible !important;
+}
+
+/* A disabled entity should have transparency 50% */
+.canvas-draggable-card.disabled {
+	/* opacity: 0.5;
+	cursor: not-allowed; */
+}
+
+.canvas-draggable-card.disabled .canvas-draggable-card__body {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.canvas-draggable-card.disabled .canvas-draggable-card__body button {
+	cursor: not-allowed;
+}
+
+.canvas-draggable-card__property-row.disabled {
+	opacity: 0.5;
+}
+
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled)
+	.canvas-draggable-card__property-row:hover:not(.disabled):not(.suggestion)
+	> .canvas-draggable-card__property-row__menu-button,
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled)
+	.canvas-draggable-card__property-row:hover:not(.disabled):not(.suggestion)
+	> *
+	.canvas-draggable-card__property-row__menu-button {
+	visibility: visible;
+}
+
+.canvas-draggable-card__property-row__menu-button {
+	visibility: hidden;
+}
+
+/* Add same border as 'selected' but litghter color and animated with a double blink */
+.highlighted {
+	animation: blink-highlighted 2s 1;
+}
+
+/* Highlight blinking infinately */
+.highlighted-infinate {
+	animation: blink-highlighted 2s infinite;
+}
+
+/* Success color border */
+.highlighted-success {
+	box-shadow: 0px 0px 0px 2px var(--color-main-success);
+}
+
+@keyframes blink-highlighted {
+	0%,
+	50% {
+		box-shadow: 0px 0px 0px 2px var(--color-main-primary);
+	}
+	25%,
+	100% {
+		box-shadow: none;
+	}
+}
+
+.errored {
+	animation: blink-errored 2s 1;
+}
+
+@keyframes blink-errored {
+	0%,
+	50% {
+		box-shadow: 0px 0px 0px 2px var(--color-main-error);
+	}
+	25%,
+	100% {
+		box-shadow: none;
+	}
+}
+
+/* Make icon buttons on the draggable cards have a highlighter circle background on hover */
+/* Both for properties and main entity cards' header */
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled)
+	.canvas-draggable-card__property-row__menu-button
+	.canvas-small-entity-card-menu-button:hover,
+.canvas:not(.globally-disabled) .canvas-draggable-card:not(.disabled)
+	.canvas-draggable-card__header__actions
+	.canvas-small-entity-card-menu-button:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.leader-line {
+	pointer-events: none;
+}
+
+.canvas svg.leader-line.suggestion {
+	cursor: not-allowed;
+}
+
+.canvas svg.leader-line.disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.leader-line:not(.disabled):not(.suggestion) path {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.leader-line:not(.disabled):not(.suggestion) use {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.leader-line:not(.disabled):not(.suggestion) marker {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.leader-line:not(.disabled):not(.suggestion) text {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.connector-line {
+	pointer-events: none;
+}
+
+.canvas svg.connector-line.suggestion {
+	cursor: not-allowed;
+}
+
+.canvas svg.connector-line.disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.canvas.globally-disabled svg.connector-line {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.connector-line:not(.disabled):not(.suggestion) path {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.connector-line:not(.disabled):not(.suggestion) use {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.connector-line:not(.disabled):not(.suggestion) marker {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+.canvas:not(.drawing-connector):not(.selection-cursor) svg.connector-line:not(.disabled):not(.suggestion) text {
+	cursor: pointer;
+	pointer-events: auto !important;
+}
+
+/* Animate the translation of the left and top values of a position absolute object when they change */
+.animate-draggable-card-spawn {
+	/* Start invisible and move to visible */
+	opacity: 0; /* Initial state, assuming the element is invisible before this class is added */
+	transition: left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s ease-out;
+}
+
+.animate-draggable-card-hide {
+	/* Start visible and move to invisible */
+	opacity: 0; /* Final state, assuming the element is invisible after this class is added */
+	transition: left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s ease-out;
+}
+
+.canvas-draggable-card__footer__item {
+	color: rgba(0, 0, 0, 0.54);
+	font-size: 14px;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 8px;
+	border-radius: 4px;
+}
+
+.canvas-draggable-card__footer__item:disabled {
+	color: rgba(0, 0, 0, 0.2);
+	cursor: not-allowed;
+}
+
+.canvas-badge-overrides {
+	padding: 3px;
+	border-radius: 7px;
+	min-width: 16px;
+	height: 16px;
+	font-size: 12px;
+}