@layer blocks {
  .task-edit {
    --task-edit-gap: var(--space-xs); /* same as .task-item row gap */
    --task-edit-mark: var(--space-s); /* mock pencil 17px, near the checkbox */
    --cluster-space: var(--task-edit-gap);
    --flow-space: var(--space-xs);
    --repel-gap: var(--space-s);
    padding-block: var(--space-3xs);
  }

  .task-edit-mark {
    flex: none;
    color: var(--color-accent-strong);
  }

  .task-edit-mark svg {
    width: var(--task-edit-mark);
    height: var(--task-edit-mark);
  }

  .task-edit-line :is(.write-line, .task-item) {
    flex: 1;
    min-inline-size: 0;
  }

  .task-edit-line .write-line {
    inline-size: auto;
    min-block-size: 0;
    padding-block: var(--space-3xs);
  }

  .task-edit-actions {
    padding-inline-start: calc(var(--task-edit-mark) + var(--task-edit-gap));
  }
}