@layer blocks {
  .task-edit {
    --task-edit-gap: 0.875rem; /* same as .task-item row gap */
    --task-edit-mark: 1.0625rem; /* mock pencil 17px, near the checkbox */
    --cluster-space: var(--task-edit-gap);
    --flow-space: 0.8rem;
    --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 .write-line,
  .task-edit-line select {
    flex: 1;
    min-inline-size: 0;
  }

  .task-edit-line .write-line {
    inline-size: auto;
    min-block-size: 0;
    padding-block: 0.4rem;
  }

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

  .task-edit-move,
  .task-edit-cancel {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  .task-edit-move {
    color: var(--color-text);
    border-block-end: var(--border-width) solid var(--color-text);
    border-radius: 0;
  }

  .task-edit-cancel {
    --link-decoration: none;
    color: var(--color-text-faint);
  }
}