.Workflow-ui {
  .Icon.is-s;
  .Text.is-s;

  background: var(--color-gray1);
  margin-top: var(--gap-s);
  min-height: 360px;
  position: relative;

  // Reserve space to the right for the remove button.
  input[type] {
    background: var(--color-white);
    display: block;
    padding-left: var(--gap-s);
    padding-right: calc(var(--gap-s) + var(--Icon-size));

    &.Workflow-stateName {
      padding-left: calc(var(--Text-height) + var(--gap-xs) * 2);
      padding-right: calc(var(--Icon-size) + var(--gap-xs) * 3);
    }
  }
}

// Every box is absolutely positioned via JS.
.Workflow-state,
.Workflow-transition {
  box-shadow: var(--shadow-2);
  position: absolute;
}

// State box is movable.
.Workflow-state {
  background: var(--color-gray2);
  cursor: move;
  padding: var(--gap-m);

  &.is-intermediate {
    height: calc(
      var(--gap-m) * 2 + var(--gap-s) * 3 + var(--Text-height) +
        var(--Icon-size)
    );
    width: calc(200px + var(--gap-m) * 2);
  }

  .sp-replacer {
    padding: 0;

    &::before {
      display: none;
    }
  }

  .sp-dd {
    display: none;
  }

  .sp-preview-inner {
    left: var(--gap-xs);
    top: var(--gap-s);
  }

  .sp-preview {
    overflow: inherit;

    &::after {
      display: none;
    }
  }

  // ...except initial and final states.
  &[data-id='initial'],
  &[data-id='final'] {
    cursor: default;
  }

  // Initial state at top left.
  &[data-id='initial'] {
    left: var(--gap-l);
    top: calc(var(--gap-l) * 2 + var(--Text-height));

    .Workflow-addTransition {
      display: block;
    }
  }

  // Final state at bottom right.
  &[data-id='final'] {
    bottom: var(--gap-l);
    right: var(--gap-l);
  }

  .ComboInput {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

// Remove button is overlaid on top of the input.
.Workflow-removeState,
.Workflow-removeTransition {
  .IconButton;
  .IconButton.is-red;

  --IconButton-name: 'remove_circle';

  position: absolute;

  &:hover,
  &:focus {
    --IconButton-name: 'remove';
  }
}

.Workflow-removeState {
  right: var(--gap-m);
  top: calc(var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2);
}

.Workflow-removeTransition {
  right: 0;
  top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
}

// Add state and transition link.
.Workflow-addState,
.Workflow-addTransition {
  &::before {
    .Icon;

    content: 'add_circle';
    margin-right: var(--gap-xs);
  }
}

.Workflow-addState {
  display: inline-block;
  padding: var(--gap-l) 0 0 var(--gap-l);
}

.Workflow-addTransition {
  display: inline-block;
  padding-top: var(--gap-s);
}

@media (@mq-xl) {
  .Workflow-state.is-intermediate {
    width: calc(222px + var(--gap-m) * 2);
  }
}
