.Workflow-ui {
  @apply relative min-h-96 overflow-clip rounded-lg border border-gray-300 bg-gray-50;
}

/* Arrows drawn on the canvas should be gray. */
.Workflow-ui canvas {
  @apply grayscale dark:[filter:grayscale(1)_invert(1)];
}

.Workflow-ui input[type] {
  @apply blokk truncate !border-gray-300 bg-white focus:[field-sizing:content];
}

/* Every box is absolutely positioned via JS. */
.Workflow-state,
.Workflow-transition {
  @apply absolute;
}

/* State boxes are movable. */
.Workflow-state {
  @apply cursor-grab rounded-lg border border-gray-300 bg-white p-4;
}

.Workflow-state .sp-replacer {
  @apply h-[calc(theme(iconSize.md)_+_1rem_+_2px)] w-[calc(theme(iconSize.md)_+_1rem_+_2px)] p-2 before:hidden hover:border-solid;
}

.Workflow-state .sp-replacer.sp-active {
  @apply border-solid;
}

.Workflow-state .sp-dd {
  @apply hidden;
}

.Workflow-state .sp-preview {
  @apply [overflow:inherit] after:hidden;
}

.Workflow-state.is-intermediate {
  @apply grid w-[16.7rem] grid-cols-[auto_1fr_auto] gap-x-2;
}

.Workflow-state.is-intermediate:has(input:focus) {
  @apply border-primary-600 bg-primary-50;
}

.Workflow-state.is-intermediate.is-dragging {
  @apply cursor-grabbing border-primary-600 bg-gray-100;
}

.Workflow-state[data-id='initial'],
.Workflow-state[data-id='final'] {
  @apply cursor-default text-sm font-semibold;
}

/* Initial state at top left. */
.Workflow-state[data-id='initial'] {
  @apply left-6 top-[calc(theme(iconSize.md)_+_3.5rem)];
}

.Workflow-state[data-id='initial'] .Workflow-addTransition {
  @apply blokk pt-2;
}

/* Final state at bottom right. */
.Workflow-state[data-id='final'] {
  @apply bottom-6 right-6;
}

.Workflow-state .ComboInput {
  @apply absolute h-px w-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)];
}

.Workflow-removeState,
.Workflow-removeTransition {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-x;
}

/* Remove transition button is overlaid on top of the input. */
.Workflow-removeTransition {
  @apply absolute right-px top-[calc(50%_-theme(iconSize.lg)_/_2_-_theme(spacing.2)_+_2px)] rounded-s-none border-s border-solid border-gray-300;
}

.Workflow-transition {
  @apply w-48;
}

input.Workflow-transitionName {
  @apply pe-[calc(theme(iconSize.lg)_+_1.5rem)];
}

.Workflow-addState {
  @apply inline-block w-full rounded-b-none border-b border-solid border-gray-200 bg-white p-4 text-start text-sm font-semibold no-underline before:btu-icon before:btu-icon-plus before:me-2;
}

.Workflow-addTransition {
  @apply btu-button btu-button-gray col-start-1 col-end-4 -mx-4 -mb-4 mt-4 rounded-t-none before:btu-icon before:btu-icon-plus before:me-2;
}
