
	.draggable.svelte-1kr8imm {
		display: flex;
		gap: var(--layout-gap);
		width: var(--size-full);
		position: relative;
	}

	.horizontal.svelte-1kr8imm {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vertical.svelte-1kr8imm {
		flex-direction: column;
	}

	.hide.svelte-1kr8imm {
		display: none;
	}

	.draggable.svelte-1kr8imm > .draggable-item,
	.draggable.svelte-1kr8imm > .form > .draggable-item {
		transition:
			transform 0.2s ease,
			border 0.2s ease;
	}

	.draggable.svelte-1kr8imm > .draggable-item.drop-target,
	.draggable.svelte-1kr8imm > .form > .draggable-item.drop-target {
		border: 2px dashed var(--border-color-primary) !important;
		border-radius: 8px;
		transform: scale(0.98);
		opacity: 0.8;
	}

	.draggable.svelte-1kr8imm > .draggable-item.dragging,
	.draggable.svelte-1kr8imm > .form > .draggable-item.dragging {
		opacity: 0.5;
		transform: scale(1.02);
		z-index: 1001;
	}

	.draggable.svelte-1kr8imm > .draggable-item .drag-handle {
		position: absolute;
		top: 4px;
		left: 4px;
		width: 20px;
		height: 20px;
		min-width: 20px;
		max-width: 20px;
		min-height: 20px;
		max-height: 20px;
		background: var(--background-fill-secondary);
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		cursor: grab;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		color: var(--body-text-color-subdued);
		opacity: 0;
		transition: opacity 0.2s ease;
		z-index: 100;
		user-select: none;
		flex-shrink: 0;
	}

	.draggable.svelte-1kr8imm > .draggable-item:hover .drag-handle {
		opacity: 1;
	}

	.draggable.svelte-1kr8imm > .draggable-item .drag-handle:hover {
		background: var(--background-fill-secondary);
		border-color: var(--border-color-primary);
		opacity: 1;
		z-index: 101;
	}

	.draggable.svelte-1kr8imm > .draggable-item .drag-handle:active {
		cursor: grabbing;
		background: var(--background-fill-secondary);
		opacity: 1;
		z-index: 101;
	}

	.horizontal.svelte-1kr8imm > .draggable-item,
	.horizontal.svelte-1kr8imm > .form > .draggable-item {
		flex: 1 1 0%;
		flex-wrap: wrap;
		min-width: min(160px, 100%);
	}

	.vertical.svelte-1kr8imm > .draggable-item,
	.vertical.svelte-1kr8imm > .form > .draggable-item {
		width: var(--size-full);
	}
