.sketchbox.svelte-1dqn2lk {
		position: inherit;
		display: flex;
		flex-direction: inherit;
		align-items: inherit;
		min-height: 32px;
	}
	.sketchbox.svelte-1dqn2lk:not(.function_mode) {
		cursor: pointer;
	}
	.function_mode.svelte-1dqn2lk .cover:where(.svelte-1dqn2lk) {
		background-color: color-mix(
			in srgb,
			var(--background-fill-primary),
			transparent 80%
		);
	}

	.row.svelte-1dqn2lk > *,
	.row.svelte-1dqn2lk > .form,
	.row.svelte-1dqn2lk > .form > * {
		flex-grow: 1 !important;
	}
	.interaction.svelte-1dqn2lk {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.cover.svelte-1dqn2lk {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	.interaction.svelte-1dqn2lk:hover,
	.active.svelte-1dqn2lk .interaction:where(.svelte-1dqn2lk) {
		border-color: var(--body-text-color);
		border-width: 1px;
		border-radius: var(--block-radius);
	}
	.active.function_mode.svelte-1dqn2lk .interaction:where(.svelte-1dqn2lk) {
		border-color: var(--color-accent);
		border-width: 2px;
	}
	.interaction.svelte-1dqn2lk:hover .add:where(.svelte-1dqn2lk),
	.interaction.svelte-1dqn2lk:hover .action:where(.svelte-1dqn2lk) {
		display: flex;
	}
	button.svelte-1dqn2lk {
		border-color: var(--body-text-color);
		border-width: 1px;
		background-color: var(--button-secondary-background-fill);
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}
	.add.svelte-1dqn2lk,
	.action.svelte-1dqn2lk {
		display: none;
		position: absolute;
	}
	.action.svelte-1dqn2lk {
		border-radius: 15px;
		width: 30px;
		height: 30px;
	}
	.add.svelte-1dqn2lk {
		border-radius: 10px;
		width: 20px;
		height: 20px;
	}
	.function.svelte-1dqn2lk {
		border-radius: 15px;
		padding: 4px 8px;
		font-size: 10px;
	}
	.function.selected.svelte-1dqn2lk {
		color: white;
	}
	.input.selected.svelte-1dqn2lk {
		background-color: oklch(0.707 0.165 254.624);
		border-color: oklch(0.707 0.165 254.624);
	}
	.output.selected.svelte-1dqn2lk {
		background-color: oklch(0.712 0.194 13.428);
		border-color: oklch(0.712 0.194 13.428);
	}
	.event.selected.svelte-1dqn2lk {
		background-color: oklch(0.702 0.183 293.541);
		border-color: oklch(0.702 0.183 293.541);
	}
	button.svelte-1dqn2lk:hover {
		background-color: var(--button-secondary-background-fill-hover);
	}
	.up.svelte-1dqn2lk {
		top: -10px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 80%;
	}
	.left.svelte-1dqn2lk {
		top: 50%;
		left: -10px;
		transform: translate(0, -50%);
		height: 80%;
	}
	.right.svelte-1dqn2lk {
		top: 50%;
		right: -10px;
		transform: translate(0, -50%);
		height: 80%;
	}
	.down.svelte-1dqn2lk {
		bottom: -10px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 80%;
	}
	.modify.svelte-1dqn2lk {
		top: 50%;
		left: 50%;
		transform: translate(calc(-50% - 20px), -50%);
	}
	.delete.svelte-1dqn2lk {
		top: 50%;
		left: 50%;
		transform: translate(calc(-50% + 20px), -50%);
	}
	.button-set.svelte-1dqn2lk {
		display: flex;
		gap: 8px;
		justify-content: center;
		align-items: center;
		height: 100%;
		flex-wrap: wrap;
		padding: 0 30px;
	}
	.component-name.svelte-1dqn2lk {
		background: var(--block-background-fill);
		border: var(--block-border-color) var(--block-border-width) solid;
		border-radius: var(--block-radius);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.component-name.svelte-1dqn2lk span:where(.svelte-1dqn2lk) {
		color: var(--body-text-color-subdued);
		font-style: italic;
	}